From 9abc8adc2255cd7df9e44f1b72267c0a1e7809b5 Mon Sep 17 00:00:00 2001
From: SergioMir018 <sergiommirs@gmail.com>
Date: Thu, 18 Dec 2025 10:08:05 -0500
Subject: [PATCH 1/4] fix de interfaz y hover en creacion de clientes y
 pantalla de empty

---
 src/components/ui/input.tsx                   |  2 +-
 src/components/ui/select.tsx                  |  2 +-
 src/components/ui/textarea.tsx                |  2 +-
 .../components/CreateCustomerDialog.tsx       | 24 ++++++-------------
 .../Customer/components/CustomerContainer.tsx |  5 ----
 .../components/CustomerEmptyState.tsx         |  2 +-
 .../Timer/components/CreateTimerDialog.tsx    |  2 +-
 7 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index ff87abc..b8a0604 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border-input border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border-input border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 2ca1df8..c89ccbc 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-neutral-300 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 5efaebc..1bd2662 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder-neutral-300 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
diff --git a/src/modules/Customer/components/CreateCustomerDialog.tsx b/src/modules/Customer/components/CreateCustomerDialog.tsx
index c416bd4..d8e565a 100644
--- a/src/modules/Customer/components/CreateCustomerDialog.tsx
+++ b/src/modules/Customer/components/CreateCustomerDialog.tsx
@@ -149,7 +149,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="sm:max-w-2xl bg-secondary">
                 <DialogHeader className="space-y-4 pb-6">
                     <DialogTitle className="text-xl font-medium">Crear nuevo cliente</DialogTitle>
                 </DialogHeader>
@@ -166,7 +166,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.companyName}
                                 onChange={(e) => handleInputChange("companyName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -174,7 +173,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                         <div className="space-y-2">
                             <Label htmlFor="country" className="text-sm font-medium">País</Label>
                             <Select value={formData.country} onValueChange={(value) => handleInputChange("country", value)}>
-                                <SelectTrigger className="h-11">
+                                <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar país..." />
                                 </SelectTrigger>
                                 <SelectContent className="bg-card max-h-80 overflow-y-auto">
@@ -197,7 +196,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.firstName}
                                 onChange={(e) => handleInputChange("firstName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
 
@@ -208,7 +206,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.lastName}
                                 onChange={(e) => handleInputChange("lastName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
                     </div>
@@ -223,7 +220,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.email}
                                 onChange={(e) => handleInputChange("email", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -236,7 +232,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.phoneNumber}
                                 onChange={(e) => handleInputChange("phoneNumber", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 placeholder="+1234567890"
                             />
                         </div>
@@ -251,7 +246,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.addressLine1}
                                 onChange={(e) => handleInputChange("addressLine1", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
 
@@ -262,7 +256,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.addressLine2}
                                 onChange={(e) => handleInputChange("addressLine2", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
                     </div>
@@ -276,7 +269,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.postalCode}
                                 onChange={(e) => handleInputChange("postalCode", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
 
@@ -287,7 +279,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.city}
                                 onChange={(e) => handleInputChange("city", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
                     </div>
@@ -302,7 +293,6 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 value={formData.website}
                                 onChange={(e) => handleInputChange("website", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 placeholder="https://example.com"
                             />
                         </div>
@@ -310,7 +300,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                         <div className="space-y-2">
                             <Label htmlFor="invoiceCurrency" className="text-sm font-medium">Moneda de facturación</Label>
                             <Select value={formData.invoiceCurrency} onValueChange={(value) => handleInputChange("invoiceCurrency", value)}>
-                                <SelectTrigger className="h-11">
+                                <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar moneda..." />
                                 </SelectTrigger>
                                 <SelectContent className="bg-card">
@@ -338,13 +328,13 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                     </div>
                 </form>
 
-                <DialogFooter className="gap-4 pt-6 justify-center">
+                <DialogFooter className="flex flex-row gap-4 pt-6 justify-center!">
                     <Button
                         type="button"
-                        variant="secondary"
+                        variant="ghost"
                         onClick={handleCancel}
                         disabled={isLoading}
-                        className="h-11 px-8 cursor-pointer"
+                        className="cursor-pointer"
                     >
                         Cancelar
                     </Button>
@@ -352,7 +342,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                         type="submit"
                         onClick={handleSubmit}
                         disabled={isLoading}
-                        className="bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm h-11 px-8 cursor-pointer"
+                        className="cursor-pointer"
                     >
                         {isLoading ? "Creando..." : "Crear cliente"}
                     </Button>
diff --git a/src/modules/Customer/components/CustomerContainer.tsx b/src/modules/Customer/components/CustomerContainer.tsx
index 0f1d904..999a1f2 100644
--- a/src/modules/Customer/components/CustomerContainer.tsx
+++ b/src/modules/Customer/components/CustomerContainer.tsx
@@ -50,11 +50,6 @@ export function CustomerContainer() {
                     open={isCreateDialogOpen}
                     onOpenChange={setIsCreateDialogOpen}
                 />
-                <EditCustomerDialog
-                    open={isEditDialogOpen}
-                    onOpenChange={setIsEditDialogOpen}
-                    customer={editingCustomer}
-                />
             </>
         )
     }
diff --git a/src/modules/Customer/components/CustomerEmptyState.tsx b/src/modules/Customer/components/CustomerEmptyState.tsx
index ac1949a..97000fc 100644
--- a/src/modules/Customer/components/CustomerEmptyState.tsx
+++ b/src/modules/Customer/components/CustomerEmptyState.tsx
@@ -56,7 +56,7 @@ export function CustomerEmptyState({ variant, onCreateExample }: CustomerEmptySt
             </EmptyHeader>
             {config.showButton && onCreateExample && (
                 <EmptyContent>
-                    <Button onClick={onCreateExample} variant="outline" size="sm" className="cursor-pointer">
+                    <Button onClick={onCreateExample} variant="outline" size="sm" className="cursor-pointer hover:bg-(--bg-secondary)">
                         <UserPlus className="h-4 w-4" />
                         {config.buttonText}
                     </Button>
diff --git a/src/modules/Timer/components/CreateTimerDialog.tsx b/src/modules/Timer/components/CreateTimerDialog.tsx
index c32fbd8..98831a1 100644
--- a/src/modules/Timer/components/CreateTimerDialog.tsx
+++ b/src/modules/Timer/components/CreateTimerDialog.tsx
@@ -209,7 +209,7 @@ export function CreateTimerDialog({ open, onOpenChange }: CreateTimerDialogProps
           </div>
         </form>
 
-        <DialogFooter className="flex flex-row gap-4 pt-8 sm:justify-center">
+        <DialogFooter className="flex flex-row gap-4 pt-6 justify-center!">
           <Button
             type="button"
             variant="ghost"

From bae2973c70b0a510d1940d4314dca7332a3b2277 Mon Sep 17 00:00:00 2001
From: SergioMir018 <sergiommirs@gmail.com>
Date: Thu, 18 Dec 2025 10:26:40 -0500
Subject: [PATCH 2/4] fix de interfaz y hover en editar clientes

---
 .../components/CreateCustomerDialog.tsx       |  4 +-
 .../components/EditCustomerDialog.tsx         | 49 +++++--------------
 2 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/modules/Customer/components/CreateCustomerDialog.tsx b/src/modules/Customer/components/CreateCustomerDialog.tsx
index d8e565a..8cff397 100644
--- a/src/modules/Customer/components/CreateCustomerDialog.tsx
+++ b/src/modules/Customer/components/CreateCustomerDialog.tsx
@@ -176,7 +176,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar país..." />
                                 </SelectTrigger>
-                                <SelectContent className="bg-card max-h-80 overflow-y-auto">
+                                <SelectContent className="bg-secondary max-h-80">
                                     {countries.map((country) => (
                                         <SelectItem key={country} value={country} className="cursor-pointer data-[state=checked]:bg-secondary/80">
                                             {country}
@@ -303,7 +303,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
                                 <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar moneda..." />
                                 </SelectTrigger>
-                                <SelectContent className="bg-card">
+                                <SelectContent className="bg-secondary">
                                     {currencies.map((currency) => (
                                         <SelectItem key={currency} value={currency} className="cursor-pointer">
                                             {currency}
diff --git a/src/modules/Customer/components/EditCustomerDialog.tsx b/src/modules/Customer/components/EditCustomerDialog.tsx
index acc64ac..94746d6 100644
--- a/src/modules/Customer/components/EditCustomerDialog.tsx
+++ b/src/modules/Customer/components/EditCustomerDialog.tsx
@@ -20,6 +20,7 @@ import {
 import { useUpdateCustomer } from "@/stores/customer-store"
 import { Customer, UpdateCustomerDto } from "@/types/customer"
 import { toast } from "sonner"
+import { clientCurrencies, countries } from "@/lib/values"
 
 interface EditCustomerDialogProps {
     open: boolean
@@ -48,20 +49,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
 
     const updateCustomer = useUpdateCustomer()
 
-    const countries = [
-        "Estados Unidos", "España", "México", "Argentina", "Colombia", "Chile",
-        "Perú", "Venezuela", "Ecuador", "Uruguay", "Paraguay", "Bolivia",
-        "Costa Rica", "Panamá", "Guatemala", "Honduras", "El Salvador", "Nicaragua",
-        "República Dominicana", "Cuba", "Puerto Rico", "Francia", "Alemania",
-        "Reino Unido", "Italia", "Portugal", "Brasil", "Canadá", "Australia"
-    ]
-
-    const currencies = [
-        "USD", "EUR", "MXN", "ARS", "COP", "CLP", "PEN", "VES", "UYU", "PYG",
-        "BOB", "CRC", "PAB", "GTQ", "HNL", "SVC", "NIO", "DOP", "CUP", "GBP",
-        "CAD", "AUD", "BRL", "JPY", "CHF", "SEK", "NOK", "DKK", "PLN", "CZK"
-    ]
-
     // Load customer data when dialog opens
     useEffect(() => {
         if (open && customer) {
@@ -202,7 +189,7 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="sm:max-w-2xl bg-secondary">
                 <DialogHeader className="space-y-4 pb-6">
                     <DialogTitle className="text-xl font-medium">Editar cliente</DialogTitle>
                 </DialogHeader>
@@ -219,7 +206,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.companyName}
                                 onChange={(e) => handleInputChange("companyName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -227,10 +213,10 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                         <div className="space-y-2">
                             <Label htmlFor="country" className="text-sm font-medium">País *</Label>
                             <Select value={formData.country} onValueChange={(value) => handleInputChange("country", value)}>
-                                <SelectTrigger className="h-11">
+                                <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar país..." />
                                 </SelectTrigger>
-                                <SelectContent>
+                                <SelectContent className="bg-secondary max-h-80">
                                     {countries.map((country) => (
                                         <SelectItem key={country} value={country}>
                                             {country}
@@ -250,7 +236,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.firstName}
                                 onChange={(e) => handleInputChange("firstName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -262,7 +247,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.lastName}
                                 onChange={(e) => handleInputChange("lastName", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -278,7 +262,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.email}
                                 onChange={(e) => handleInputChange("email", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -291,7 +274,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.phoneNumber}
                                 onChange={(e) => handleInputChange("phoneNumber", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 placeholder="+1234567890"
                             />
                         </div>
@@ -306,7 +288,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.addressLine1}
                                 onChange={(e) => handleInputChange("addressLine1", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -318,7 +299,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.addressLine2}
                                 onChange={(e) => handleInputChange("addressLine2", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                             />
                         </div>
                     </div>
@@ -332,7 +312,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.postalCode}
                                 onChange={(e) => handleInputChange("postalCode", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -344,7 +323,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.city}
                                 onChange={(e) => handleInputChange("city", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 required
                             />
                         </div>
@@ -360,7 +338,6 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                                 value={formData.website}
                                 onChange={(e) => handleInputChange("website", e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                className="h-11"
                                 placeholder="https://example.com"
                             />
                         </div>
@@ -368,12 +345,12 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                         <div className="space-y-2">
                             <Label htmlFor="invoiceCurrency" className="text-sm font-medium">Moneda de facturación *</Label>
                             <Select value={formData.invoiceCurrency} onValueChange={(value) => handleInputChange("invoiceCurrency", value)}>
-                                <SelectTrigger className="h-11">
+                                <SelectTrigger>
                                     <SelectValue placeholder="Seleccionar moneda..." />
                                 </SelectTrigger>
-                                <SelectContent>
-                                    {currencies.map((currency) => (
-                                        <SelectItem key={currency} value={currency}>
+                                <SelectContent className="bg-secondary">
+                                    {clientCurrencies.map((currency) => (
+                                        <SelectItem key={currency} value={currency} className="cursor-pointer">
                                             {currency}
                                         </SelectItem>
                                     ))}
@@ -389,20 +366,20 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                             id="additionalInfo"
                             value={formData.additionalInfo}
                             onChange={(e) => handleInputChange("additionalInfo", e.target.value)}
-                            className="resize-none min-h-[80px]"
+                            className="resize-none min-h-20"
                             rows={3}
                             placeholder="Notas adicionales sobre el cliente..."
                         />
                     </div>
                 </form>
 
-                <DialogFooter className="gap-4 pt-6 !justify-center sm:!justify-center">
+                <DialogFooter className="gap-4 pt-6 justify-center!">
                     <Button
                         type="button"
-                        variant="secondary"
+                        variant="ghost"
                         onClick={handleCancel}
                         disabled={isLoading}
-                        className="h-11 px-8"
+                        className="cursor-pointer"
                     >
                         Cancelar
                     </Button>
@@ -410,7 +387,7 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
                         type="submit"
                         onClick={handleSubmit}
                         disabled={isLoading}
-                        className="bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm h-11 px-8"
+                        className="cursor-pointer"
                     >
                         {isLoading ? "Actualizando..." : "Guardar cambios"}
                     </Button>

From 50822a47eeaabc4e6837d0011fd2e812b51ea7ac Mon Sep 17 00:00:00 2001
From: SergioMir018 <sergiommirs@gmail.com>
Date: Thu, 18 Dec 2025 11:17:37 -0500
Subject: [PATCH 3/4] estilos generales de la app funcionales

---
 src/App.tsx                                   |   2 +-
 src/index.css                                 | 434 +++++++-----------
 .../Customer/components/CustomerCard.tsx      |  12 +-
 .../Customer/components/CustomerContainer.tsx |   2 +-
 .../components/CustomerEmptyState.tsx         |   2 +-
 .../Timer/components/TimerContainer.tsx       |   2 +-
 src/modules/Timer/components/TimerGrid.tsx    |   2 +-
 src/modules/Timer/index.tsx                   |   6 +-
 8 files changed, 190 insertions(+), 272 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2e131a1..96f3f62 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,7 +77,7 @@ export default function App() {
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <HashRouter>
         <SidebarProvider >
-          <AppSidebar variant='inset' routes={routes} />
+          <AppSidebar variant="inset" routes={routes} />
           <SidebarInset>
             <Routes>
               {routes.map(route => (
diff --git a/src/index.css b/src/index.css
index 4ae38c2..b7efd33 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,88 @@
 @import "tailwindcss";
 
+/* =========================================
+  1. CONFIGURACIÓN DEL TEMA (Tailwind v4)
+  =========================================
+*/
+@theme {
+  /* --- COLORES SHADCN (Canales -> necesitan envoltorio HSL) --- */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  /* --- TUS COLORES PERSONALIZADOS (Hex/Oklch -> pasan directo con var) --- */
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-tertiary: var(--bg-tertiary);
+  --color-bg-card: var(--bg-card);
+  --color-bg-dialog: var(--bg-dialog);
+  --color-bg-button-secondary: var(--bg-button-secondary);
+
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+
+  --color-accent-blue: var(--accent-blue);
+  --color-accent-blue-hover: var(--accent-blue-hover);
+  --color-accent-green: var(--accent-green);
+  --color-accent-orange: var(--accent-orange);
+  --color-accent-red: var(--accent-red);
+
+  --color-border-color: var(--border-color);
+  --color-border-light: var(--border-light);
+
+  /* --- SIDEBAR (OKLCH completo) --- */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* --- RADIUS & ANIMACIONES --- */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  
+  --animate-fade-in: fadeIn 0.3s ease-in-out;
+  --animate-slide-up: slideUp 0.3s ease-out;
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
+
+/* =========================================
+  2. VARIABLES CSS (Root y Dark Mode)
+  =========================================
+*/
 @layer base {
   :root {
-    /* macOS Clock app inspired color palette */
+    /* macOS Palette (Hex) */
     --bg-primary: #1e1e1e;
     --bg-secondary: #2c2c2e;
     --bg-tertiary: #3a3a3c;
@@ -27,13 +107,9 @@
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
 
-    --radius-sm: 6px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius: 10px;
+    --radius: 0.5rem;
 
-    /* Sidebar variables */
+    /* Sidebar (OKLCH) */
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
     --sidebar-primary: oklch(0.205 0 0);
@@ -43,14 +119,39 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
 
-    /* Tailwind design system colors - macOS dark theme */
-    --background: 0 0% 12%;
+    /* Shadcn System Colors (Light Mode Default - HSL Channels) */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+  }
+
+  /* Dark Mode Overrides */
+  .dark {
+    /* Shadcn System Colors (Dark Mode - HSL Channels) */
+    /* Nota: He ajustado esto para que coincida con tu paleta macOS donde era posible */
+    --background: 0 0% 12%;       /* Tu --bg-primary en HSL aprox */
     --foreground: 0 0% 98%;
-    --card: 0 0% 20%;
+    --card: 0 0% 20%;             /* Tu --bg-card en HSL aprox */
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 12%;
     --popover-foreground: 0 0% 98%;
-    --primary: 213 100% 50%;
+    --primary: 213 100% 50%;      /* Tu --accent-blue */
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 15%;
     --secondary-foreground: 0 0% 98%;
@@ -63,317 +164,138 @@
     --border: 220 13% 28%;
     --input: 220 13% 22%;
     --ring: 213 100% 50%;
+
+    /* Sidebar Dark Variables */
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.439 0 0);
   }
-}
 
-@layer base {
+  /* Reset Global */
   * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border-color: hsl(var(--border));
-    outline-color: hsl(var(--ring) / 0.5);
+    @apply border-border;
   }
-
+  
   body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-      sans-serif;
+    @apply bg-background text-foreground;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    line-height: 1.6;
-    height: 100vh;
-    overflow: hidden;
-  }
-}
-
-@layer utilities {
-  .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-  }
-
-  .slide-up {
-    animation: slideUp 0.3s ease-out;
-  }
-
-  .text-primary {
-    color: var(--text-primary);
-  }
-
-  .text-secondary {
-    color: var(--text-secondary);
-  }
-
-  .text-muted {
-    color: var(--text-muted);
-  }
-
-  .bg-primary {
-    background-color: var(--bg-primary);
-  }
-
-  .bg-secondary {
-    background-color: var(--bg-secondary);
-  }
-
-  .bg-tertiary {
-    background-color: var(--bg-tertiary);
-  }
-
-  .standard-card-radius {
-    border-radius: var(--radius-xl);
   }
 }
 
+/* =========================================
+  3. COMPONENTES Y UTILIDADES
+  =========================================
+*/
 @layer components {
+  /* Clases Legacy / Personalizadas */
   .btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: var(--radius-md);
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    outline: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+    @apply inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium transition-all duration-200 ease-in-out border-none rounded-md outline-none cursor-pointer;
   }
 
   .btn-primary {
     background-color: var(--accent-green);
     color: white;
   }
-
   .btn-primary:hover {
-    background-color: var(--accent-green-hover);
+    background-color: var(--accent-green-hover); /* Necesitas definir esta var si no existe, o usar un color fijo */
     transform: translateY(-1px);
     box-shadow: var(--shadow-md);
   }
-
   .btn-primary:active {
-    background-color: var(--accent-green-dark);
     transform: translateY(0);
   }
 
   .btn-secondary {
-    background-color: var(--bg-tertiary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
+    @apply bg-bg-tertiary text-text-primary border border-border-color;
   }
-
   .btn-secondary:hover {
-    background-color: var(--border-color);
-    border-color: var(--border-light);
+    @apply bg-border-color border-border-light;
   }
 
   .btn-ghost {
-    background-color: transparent;
-    color: var(--text-secondary);
-    border: 1px solid transparent;
+    @apply bg-transparent text-text-secondary border-transparent;
   }
-
   .btn-ghost:hover {
-    background-color: var(--bg-secondary);
-    color: var(--text-primary);
+    @apply bg-bg-secondary text-text-primary;
   }
 
   .card {
-    background-color: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    box-shadow: var(--shadow-sm);
+    @apply bg-bg-secondary border border-border-color p-6 shadow-sm rounded-xl;
   }
 
   .input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background-color: var(--bg-tertiary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    color: var(--text-primary);
-    font-size: 0.875rem;
-    transition: border-color 0.2s ease;
+    @apply w-full px-4 py-3 text-sm transition-colors duration-200 border rounded-md bg-bg-tertiary border-border-color text-text-primary placeholder:text-text-muted focus:outline-none;
   }
-
   .input:focus {
-    outline: none;
     border-color: var(--accent-green);
     box-shadow: 0 0 0 3px rgba(50, 215, 75, 0.1);
   }
 
-  .input::placeholder {
-    color: var(--text-muted);
-  }
-
   .nav-tab {
-    padding: 0.75rem 1.5rem;
-    background-color: transparent;
-    color: var(--text-secondary);
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 0.875rem;
-    font-weight: 500;
+    @apply px-6 py-3 text-sm font-medium transition-all duration-200 bg-transparent border-none cursor-pointer text-text-secondary rounded-md hover:bg-bg-secondary hover:text-text-primary;
   }
-
-  .nav-tab:hover {
-    background-color: var(--bg-secondary);
-    color: var(--text-primary);
-  }
-
   .nav-tab.active {
-    background-color: var(--bg-tertiary);
-    color: var(--text-primary);
+    @apply bg-bg-tertiary text-text-primary;
   }
-
+  
+  /* Utilidades específicas */
   .digital-display {
     font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     font-weight: 300;
     letter-spacing: -0.02em;
     color: var(--text-primary);
   }
+  .digital-display-large { @apply text-6xl leading-none; }
+  .digital-display-medium { @apply text-4xl leading-snug; }
+  .digital-display-small { @apply text-xl leading-snug; }
 
-  .digital-display-large {
-    font-size: 4rem;
-    line-height: 1;
-  }
-
-  .digital-display-medium {
-    font-size: 2rem;
-    line-height: 1.2;
+  /* Correcciones para Radix UI / Dialogs */
+  .dialog-input {
+    @apply border border-white bg-[#2a2a2a] px-4 py-3 text-white rounded-md focus:border-[#0066cc] focus:outline-none focus:ring-2 focus:ring-[#0066cc]/20;
   }
 
-  .digital-display-small {
-    font-size: 1.25rem;
-    line-height: 1.3;
+  [data-radix-select-content] {
+    @apply bg-[#232323] text-white border border-[#444] shadow-2xl;
   }
-
-  .bg-card {
-    background-color: #323232;
+  
+  .focus-ring {
+    outline: 2px solid var(--accent-green);
+    outline-offset: 2px;
   }
+}
 
-  .timer-tab-active[data-state="active"] {
-    background-color: #323232 ;
-    border-radius: var(--radius-xl);
+/* =========================================
+  4. UTILIDADES SUELTAS (Custom)
+  =========================================
+*/
+@layer utilities {
+  .standard-card-radius {
+    border-radius: var(--radius-xl); /* Asegúrate de que --radius-xl esté definido en root */
   }
-
-  #root {
-    height: 100vh;
-    width: 100vw;
+  
+  /* Scrollbars estilo macOS */
+  ::-webkit-scrollbar {
+    width: 8px;
   }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+  ::-webkit-scrollbar-track {
+    background: var(--bg-primary);
   }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  ::-webkit-scrollbar-thumb {
+    background: var(--bg-tertiary);
+    border-radius: 6px;
   }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--border-light);
   }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  ::selection {
+    background-color: rgba(50, 215, 75, 0.3);
+    color: var(--text-primary);
   }
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-primary);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-sm);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-light);
-}
-
-::selection {
-  background-color: rgba(50, 215, 75, 0.3);
-  color: var(--text-primary);
-}
-
-.focus-ring {
-  outline: 2px solid var(--accent-green);
-  outline-offset: 2px;
-}
-
-.dark {
-  --background: 0 0% 12%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 20%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 12%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 213 100% 50%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 15%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 220 13% 22%;
-  --muted-foreground: 220 9% 56%;
-  --accent: 220 13% 22%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 220 13% 28%;
-  --input: 220 13% 22%;
-  --ring: 213 100% 50%;
-  
-  /* Sidebar dark theme variables */
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-.bg-secondary,
-.btn-secondary {
-  background-color: #272727;
-}
-
-.dialog-input {
-  border: 1px solid white;
-  background-color: #2a2a2a;
-  padding: 12px 16px;
-  color: white;
-  border-radius: 6px;
-}
-
-.dialog-input:focus {
-  border: 1px solid #0066cc ;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-  outline: none;
-}
-
-[data-radix-select-content] {
-  background: #232323;
-  color: #fff;
-  border: 1px solid #444;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
 }
\ No newline at end of file
diff --git a/src/modules/Customer/components/CustomerCard.tsx b/src/modules/Customer/components/CustomerCard.tsx
index f2ad60f..d344a99 100644
--- a/src/modules/Customer/components/CustomerCard.tsx
+++ b/src/modules/Customer/components/CustomerCard.tsx
@@ -77,7 +77,7 @@ export function CustomerCard({
                                 e.stopPropagation()
                                 onEditCustomer?.(customer)
                             }}
-                            className="h-8 w-8 p-0"
+                            className="h-8 w-8 cursor-pointer"
                         >
                             <Edit className="h-3 w-3" />
                         </Button>
@@ -92,7 +92,7 @@ export function CustomerCard({
                                     onDeleteCustomer?.(customer.id)
                                 }
                             }}
-                            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                            className="h-8 w-8 p-0 hover:text-destructive cursor-pointer"
                         >
                             <Trash2 className="h-3 w-3" />
                         </Button>
@@ -104,7 +104,7 @@ export function CustomerCard({
                 {/* Contact Info */}
                 <div className="space-y-2">
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <Mail className="h-3 w-3 flex-shrink-0" />
+                        <Mail className="h-3 w-3 shrink-0" />
                         <span className="line-clamp-1" title={customer.email}>
                             {customer.email}
                         </span>
@@ -112,7 +112,7 @@ export function CustomerCard({
 
                     {customer.phoneNumber && (
                         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                            <Phone className="h-3 w-3 flex-shrink-0" />
+                            <Phone className="h-3 w-3 shrink-0" />
                             <span>{customer.phoneNumber}</span>
                         </div>
                     )}
@@ -120,7 +120,7 @@ export function CustomerCard({
 
                 {/* Location */}
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <MapPin className="h-3 w-3 flex-shrink-0" />
+                    <MapPin className="h-3 w-3 shrink-0" />
                     <span className="line-clamp-1" title={`${customer.city}, ${customer.country}`}>
                         {customer.city}, {customer.country}
                     </span>
@@ -129,7 +129,7 @@ export function CustomerCard({
                 {/* Website */}
                 {customer.website && (
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <Globe className="h-3 w-3 flex-shrink-0" />
+                        <Globe className="h-3 w-3 shrink-0" />
                         <a
                             href={customer.website}
                             target="_blank"
diff --git a/src/modules/Customer/components/CustomerContainer.tsx b/src/modules/Customer/components/CustomerContainer.tsx
index 999a1f2..5f65a6d 100644
--- a/src/modules/Customer/components/CustomerContainer.tsx
+++ b/src/modules/Customer/components/CustomerContainer.tsx
@@ -62,7 +62,7 @@ export function CustomerContainer() {
                     <div>
                         <h1 className="text-2xl font-semibold">Clientes</h1>
                     </div>
-                    <Button onClick={handleCreateCustomer} className="flex items-center gap-2">
+                    <Button variant="outline" className="cursor-pointer hover:bg-(--bg-secondary)" onClick={handleCreateCustomer}>
                         <Plus className="h-4 w-4" />
                         Crear Cliente
                     </Button>
diff --git a/src/modules/Customer/components/CustomerEmptyState.tsx b/src/modules/Customer/components/CustomerEmptyState.tsx
index 97000fc..e8f8301 100644
--- a/src/modules/Customer/components/CustomerEmptyState.tsx
+++ b/src/modules/Customer/components/CustomerEmptyState.tsx
@@ -44,7 +44,7 @@ export function CustomerEmptyState({ variant, onCreateExample }: CustomerEmptySt
     const config = getEmptyConfig()
 
     return (
-        <Empty className="from-muted/50 to-background h-full bg-linear-to-b from-30%">
+        <Empty className="from-muted/50 to-background h-full w-full bg-linear-to-b from-20%">
             <EmptyHeader>
                 <EmptyMedia variant="icon">
                     <Users />
diff --git a/src/modules/Timer/components/TimerContainer.tsx b/src/modules/Timer/components/TimerContainer.tsx
index 570e2bf..807a75e 100644
--- a/src/modules/Timer/components/TimerContainer.tsx
+++ b/src/modules/Timer/components/TimerContainer.tsx
@@ -100,7 +100,7 @@ export function TimerContainer() {
 
     return (
         <>
-            <div className="h-full w-full flex flex-col">
+            <div className="flex flex-col mx-10">
                 {/* Filtro por proyecto */}
                 <div className="flex items-center gap-2 px-6 pt-4 pb-2">
                     <label htmlFor="project-filter" className="text-sm font-medium text-muted-foreground">Filtrar por proyecto:</label>
diff --git a/src/modules/Timer/components/TimerGrid.tsx b/src/modules/Timer/components/TimerGrid.tsx
index 92c3109..c75b6c0 100644
--- a/src/modules/Timer/components/TimerGrid.tsx
+++ b/src/modules/Timer/components/TimerGrid.tsx
@@ -20,7 +20,7 @@ export function TimerGrid({
     onDeleteTimer
 }: TimerGridProps) {
     return (
-        <ScrollArea className="h-[calc(100vh-6rem)] w-full">
+        <ScrollArea>
             <div className="p-6 pb-8">
                 <div className="grid w-full grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
                     {timers.map((timer) => (
diff --git a/src/modules/Timer/index.tsx b/src/modules/Timer/index.tsx
index 2d25987..f72c768 100644
--- a/src/modules/Timer/index.tsx
+++ b/src/modules/Timer/index.tsx
@@ -2,9 +2,5 @@ import { TimerContainer } from "./components/TimerContainer";
 
 
 export function Timer() {
-    return (
-        <div className="h-full flex">
-            <TimerContainer />
-        </div>
-    )
+    return <TimerContainer />
 }
\ No newline at end of file

From 1acefbef1525af0c2d71fada940318f882d90c0e Mon Sep 17 00:00:00 2001
From: SergioMir018 <sergiommirs@gmail.com>
Date: Thu, 18 Dec 2025 11:57:58 -0500
Subject: [PATCH 4/4] mejora completa de la interfaz grafica

---
 src/App.tsx                                   |   2 +-
 src/components/ui/input.tsx                   |   2 +-
 src/components/ui/textarea.tsx                |   2 +-
 src/index.css                                 | 280 +++++++-----------
 .../components/CreateCustomerDialog.tsx       |   2 +-
 .../components/EditCustomerDialog.tsx         |   2 +-
 .../Proyect/components/ProjectEmptyState.tsx  |   2 +-
 .../Timer/components/CreateTimerDialog.tsx    |   8 +-
 .../Timer/components/EditTimerDialog.tsx      |   2 +-
 .../Timer/components/TimerContainer.tsx       |   6 +-
 .../Timer/components/TimerEmptyState.tsx      |   2 +-
 src/modules/Timer/components/TimerHeader.tsx  |   4 +-
 src/modules/Timer/components/TimerTabs.tsx    |   2 +-
 13 files changed, 132 insertions(+), 184 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 96f3f62..1d524af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -78,7 +78,7 @@ export default function App() {
       <HashRouter>
         <SidebarProvider >
           <AppSidebar variant="inset" routes={routes} />
-          <SidebarInset>
+          <SidebarInset className="pl-4">
             <Routes>
               {routes.map(route => (
                 <Route key={route.path} path={route.path} element={route.element} />
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b8a0604..69b64fb 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border-input border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 1bd2662..7f21b5e 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder-neutral-300 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
diff --git a/src/index.css b/src/index.css
index b7efd33..e5c87ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@
   =========================================
 */
 @theme {
-  /* --- COLORES SHADCN (Canales -> necesitan envoltorio HSL) --- */
+  /* --- COLORES SHADCN (Canales HSL) --- */
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-card: hsl(var(--card));
@@ -26,7 +26,7 @@
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
 
-  /* --- TUS COLORES PERSONALIZADOS (Hex/Oklch -> pasan directo con var) --- */
+  /* --- COLORES PERSONALIZADOS (Coherentes con Shadcn) --- */
   --color-bg-primary: var(--bg-primary);
   --color-bg-secondary: var(--bg-secondary);
   --color-bg-tertiary: var(--bg-tertiary);
@@ -47,7 +47,7 @@
   --color-border-color: var(--border-color);
   --color-border-light: var(--border-light);
 
-  /* --- SIDEBAR (OKLCH completo) --- */
+  /* --- SIDEBAR --- */
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -82,34 +82,46 @@
 */
 @layer base {
   :root {
-    /* macOS Palette (Hex) */
-    --bg-primary: #1e1e1e;
-    --bg-secondary: #2c2c2e;
-    --bg-tertiary: #3a3a3c;
-    --bg-card: #323232;
-    --bg-dialog: #1e1e1e;
-    --bg-button-secondary: #272727;
-
-    --text-primary: #ffffff;
-    --text-secondary: #8e8e93;
-    --text-muted: #636366;
-
-    --accent-blue: #007aff;
-    --accent-blue-hover: #0056b3;
-    --accent-green: #34c759;
-    --accent-orange: #ff9500;
-    --accent-red: #ff3b30;
-
-    --border-color: #48484a;
-    --border-light: #636366;
-
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
-
-    --radius: 0.5rem;
-
-    /* Sidebar (OKLCH) */
+    /* --- DEFINICIÓN DE PALETA MACOS "PURE DARK" --- */
+    
+    /* Nivel 1: Fondo Base - NEGRO PURO */
+    --bg-primary: #000000; 
+    
+    /* Nivel 2: Cards - Gris muy profundo (Casi negro) */
+    --bg-secondary: #161618; 
+    --bg-card: #161618;
+    
+    /* Nivel 3: Inputs/Botones - Un tono más arriba para visibilidad */
+    --bg-tertiary: #262629;
+    --bg-button-secondary: #262629;
+    
+    /* Especiales */
+    --bg-dialog: #161618;
+    
+    /* Textos (Mantenemos contraste alto) */
+    --text-primary: #FFFFFF;
+    --text-secondary: #A1A1A6; /* System Gray optimizado para negro */
+    --text-muted: #6C6C70;     /* System Gray 2 */
+
+    /* Acentos (Iguales, resaltan más sobre negro) */
+    --accent-blue: #0A84FF;
+    --accent-blue-hover: #0077ED;
+    --accent-green: #30D158;
+    --accent-orange: #FF9F0A;
+    --accent-red: #FF453A;
+
+    /* Bordes (Más oscuros para mezclarse) */
+    --border-color: #27272A;
+    --border-light: #3F3F46;
+
+    /* Sombras */
+    --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.05); /* Sombra blanca sutil para separar capas oscuras */
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.8);
+
+    --radius: 0.75rem;
+
+    /* Sidebar Defaults (Light mode placeholder) */
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
     --sidebar-primary: oklch(0.205 0 0);
@@ -119,61 +131,76 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
 
-    /* Shadcn System Colors (Light Mode Default - HSL Channels) */
+    /* --- SHADCN LIGHT MODE DEFAULT --- */
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
   }
 
-  /* Dark Mode Overrides */
+  /* --- DARK MODE OVERRIDES (ULTRA DARK) --- */
   .dark {
-    /* Shadcn System Colors (Dark Mode - HSL Channels) */
-    /* Nota: He ajustado esto para que coincida con tu paleta macOS donde era posible */
-    --background: 0 0% 12%;       /* Tu --bg-primary en HSL aprox */
-    --foreground: 0 0% 98%;
-    --card: 0 0% 20%;             /* Tu --bg-card en HSL aprox */
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 12%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 213 100% 50%;      /* Tu --accent-blue */
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 15%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 220 13% 22%;
-    --muted-foreground: 220 9% 56%;
-    --accent: 220 13% 22%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 220 13% 28%;
-    --input: 220 13% 22%;
-    --ring: 213 100% 50%;
-
-    /* Sidebar Dark Variables */
-    --sidebar: oklch(0.205 0 0);
+    /* Background: #000000 (Negro Puro) */
+    --background: 0 0% 0%;
+    
+    --foreground: 0 0% 100%;
+    
+    /* Card: #161618 (HSL 240 5% 9%) - Apenas distinguible del negro */
+    --card: 240 5% 9%;
+    --card-foreground: 0 0% 100%;
+    
+    --popover: 240 5% 9%;
+    --popover-foreground: 0 0% 100%;
+    
+    /* Primary: #0A84FF */
+    --primary: 210 100% 52%;
+    --primary-foreground: 0 0% 100%;
+    
+    /* Secondary: #262629 (HSL 240 4% 16%) */
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 0% 100%;
+    
+    /* Muted: #1F1F22 */
+    --muted: 240 5% 13%;
+    --muted-foreground: 240 5% 65%;
+    
+    /* Accent: Un poco más claro que Card */
+    --accent: 240 4% 16%;
+    --accent-foreground: 0 0% 100%;
+    
+    --destructive: 0 100% 61%;
+    --destructive-foreground: 0 0% 100%;
+    
+    /* Border: #27272A (Muy oscuro) */
+    --border: 240 4% 16%;
+    --input: 240 4% 16%;
+    
+    --ring: 210 100% 52%;
+
+    /* Sidebar Ultra Dark */
+    --sidebar: oklch(0.13 0 0); /* ~#161618 */
     --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary: oklch(0.623 0.214 259.815);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent: oklch(0.20 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.439 0 0);
+    --sidebar-border: oklch(0.20 0 0);
+    --sidebar-ring: oklch(0.623 0.214 259.815);
   }
 
   /* Reset Global */
@@ -190,112 +217,33 @@
 }
 
 /* =========================================
-  3. COMPONENTES Y UTILIDADES
-  =========================================
-*/
-@layer components {
-  /* Clases Legacy / Personalizadas */
-  .btn {
-    @apply inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium transition-all duration-200 ease-in-out border-none rounded-md outline-none cursor-pointer;
-  }
-
-  .btn-primary {
-    background-color: var(--accent-green);
-    color: white;
-  }
-  .btn-primary:hover {
-    background-color: var(--accent-green-hover); /* Necesitas definir esta var si no existe, o usar un color fijo */
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-  .btn-primary:active {
-    transform: translateY(0);
-  }
-
-  .btn-secondary {
-    @apply bg-bg-tertiary text-text-primary border border-border-color;
-  }
-  .btn-secondary:hover {
-    @apply bg-border-color border-border-light;
-  }
-
-  .btn-ghost {
-    @apply bg-transparent text-text-secondary border-transparent;
-  }
-  .btn-ghost:hover {
-    @apply bg-bg-secondary text-text-primary;
-  }
-
-  .card {
-    @apply bg-bg-secondary border border-border-color p-6 shadow-sm rounded-xl;
-  }
-
-  .input {
-    @apply w-full px-4 py-3 text-sm transition-colors duration-200 border rounded-md bg-bg-tertiary border-border-color text-text-primary placeholder:text-text-muted focus:outline-none;
-  }
-  .input:focus {
-    border-color: var(--accent-green);
-    box-shadow: 0 0 0 3px rgba(50, 215, 75, 0.1);
-  }
-
-  .nav-tab {
-    @apply px-6 py-3 text-sm font-medium transition-all duration-200 bg-transparent border-none cursor-pointer text-text-secondary rounded-md hover:bg-bg-secondary hover:text-text-primary;
-  }
-  .nav-tab.active {
-    @apply bg-bg-tertiary text-text-primary;
-  }
-  
-  /* Utilidades específicas */
-  .digital-display {
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-weight: 300;
-    letter-spacing: -0.02em;
-    color: var(--text-primary);
-  }
-  .digital-display-large { @apply text-6xl leading-none; }
-  .digital-display-medium { @apply text-4xl leading-snug; }
-  .digital-display-small { @apply text-xl leading-snug; }
-
-  /* Correcciones para Radix UI / Dialogs */
-  .dialog-input {
-    @apply border border-white bg-[#2a2a2a] px-4 py-3 text-white rounded-md focus:border-[#0066cc] focus:outline-none focus:ring-2 focus:ring-[#0066cc]/20;
-  }
-
-  [data-radix-select-content] {
-    @apply bg-[#232323] text-white border border-[#444] shadow-2xl;
-  }
-  
-  .focus-ring {
-    outline: 2px solid var(--accent-green);
-    outline-offset: 2px;
-  }
-}
-
-/* =========================================
-  4. UTILIDADES SUELTAS (Custom)
+  4. UTILIDADES SUELTAS
   =========================================
 */
 @layer utilities {
   .standard-card-radius {
-    border-radius: var(--radius-xl); /* Asegúrate de que --radius-xl esté definido en root */
+    border-radius: var(--radius-lg);
   }
   
-  /* Scrollbars estilo macOS */
+  /* Scrollbars estilo macOS "OLED" */
   ::-webkit-scrollbar {
-    width: 8px;
+    width: 10px;
+    background-color: transparent;
   }
   ::-webkit-scrollbar-track {
-    background: var(--bg-primary);
+    background-color: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: var(--bg-tertiary);
-    border-radius: 6px;
+    background-color: var(--bg-tertiary);
+    border-radius: 10px;
+    border: 2px solid var(--bg-primary); 
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--border-light);
+    background-color: var(--text-muted);
   }
+  
   ::selection {
-    background-color: rgba(50, 215, 75, 0.3);
-    color: var(--text-primary);
+    background-color: rgba(10, 132, 255, 0.4);
+    color: white;
   }
 }
\ No newline at end of file
diff --git a/src/modules/Customer/components/CreateCustomerDialog.tsx b/src/modules/Customer/components/CreateCustomerDialog.tsx
index 8cff397..4ae68dd 100644
--- a/src/modules/Customer/components/CreateCustomerDialog.tsx
+++ b/src/modules/Customer/components/CreateCustomerDialog.tsx
@@ -149,7 +149,7 @@ export function CreateCustomerDialog({ open, onOpenChange }: CreateCustomerDialo
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-2xl bg-secondary">
+            <DialogContent className="sm:max-w-2xl">
                 <DialogHeader className="space-y-4 pb-6">
                     <DialogTitle className="text-xl font-medium">Crear nuevo cliente</DialogTitle>
                 </DialogHeader>
diff --git a/src/modules/Customer/components/EditCustomerDialog.tsx b/src/modules/Customer/components/EditCustomerDialog.tsx
index 94746d6..936fe2c 100644
--- a/src/modules/Customer/components/EditCustomerDialog.tsx
+++ b/src/modules/Customer/components/EditCustomerDialog.tsx
@@ -189,7 +189,7 @@ export function EditCustomerDialog({ open, onOpenChange, customer }: EditCustome
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-2xl bg-secondary">
+            <DialogContent className="sm:max-w-2xl">
                 <DialogHeader className="space-y-4 pb-6">
                     <DialogTitle className="text-xl font-medium">Editar cliente</DialogTitle>
                 </DialogHeader>
diff --git a/src/modules/Proyect/components/ProjectEmptyState.tsx b/src/modules/Proyect/components/ProjectEmptyState.tsx
index 1f07e99..8111cef 100644
--- a/src/modules/Proyect/components/ProjectEmptyState.tsx
+++ b/src/modules/Proyect/components/ProjectEmptyState.tsx
@@ -44,7 +44,7 @@ export function ProjectEmptyState({ variant, onCreateExample }: ProjectEmptyStat
     const config = getEmptyConfig()
 
     return (
-        <Empty className="from-muted/50 to-background h-full bg-gradient-to-b from-30%">
+        <Empty className="from-muted/50 to-background h-full w-full bg-linear-to-b from-30%">
             <EmptyHeader>
                 <EmptyMedia variant="icon">
                     <FolderOpen />
diff --git a/src/modules/Timer/components/CreateTimerDialog.tsx b/src/modules/Timer/components/CreateTimerDialog.tsx
index 98831a1..7db6ba6 100644
--- a/src/modules/Timer/components/CreateTimerDialog.tsx
+++ b/src/modules/Timer/components/CreateTimerDialog.tsx
@@ -115,7 +115,7 @@ export function CreateTimerDialog({ open, onOpenChange }: CreateTimerDialogProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-xl max-w-xl bg-secondary">
+      <DialogContent className="sm:max-w-xl max-w-xl">
         <DialogHeader className="space-y-4 pb-6">
           <DialogTitle className="text-xl font-medium">Crear nuevo timer</DialogTitle>
         </DialogHeader>
@@ -145,7 +145,7 @@ export function CreateTimerDialog({ open, onOpenChange }: CreateTimerDialogProps
                   handleSubmit(syntheticEvent)
                 }
               }}
-              className="resize-none min-h-[90px]"
+              className="resize-none min-h-40"
               rows={3}
             />
           </div>
@@ -153,7 +153,7 @@ export function CreateTimerDialog({ open, onOpenChange }: CreateTimerDialogProps
           <div className="space-y-3">
             <Label htmlFor="project" className="text-sm font-medium">Proyecto</Label>
             <Select value={projectId || "no-project"} onValueChange={(value) => setProjectId(value === "no-project" ? undefined : value)}>
-              <SelectTrigger className="dialog-input h-11">
+              <SelectTrigger>
                 <SelectValue placeholder="Seleccionar proyecto (opcional)">
                   {projectId && projects.find(p => p.id === projectId) ? (
                     <div className="flex items-center gap-2">
@@ -165,7 +165,7 @@ export function CreateTimerDialog({ open, onOpenChange }: CreateTimerDialogProps
                   )}
                 </SelectValue>
               </SelectTrigger>
-              <SelectContent className="bg-secondary max-h-80">
+              <SelectContent className="max-h-80">
                 <SelectItem value="no-project" className="cursor-pointer">Sin proyecto</SelectItem>
                 {projects.map((project) => (
                   <SelectItem key={project.id} value={project.id} className="cursor-pointer">
diff --git a/src/modules/Timer/components/EditTimerDialog.tsx b/src/modules/Timer/components/EditTimerDialog.tsx
index e418647..345db1f 100644
--- a/src/modules/Timer/components/EditTimerDialog.tsx
+++ b/src/modules/Timer/components/EditTimerDialog.tsx
@@ -228,7 +228,7 @@ export function EditTimerDialog({open, onOpenChange, timerId}: EditTimerDialogPr
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-xl max-w-xl bg-secondary">
+            <DialogContent className="sm:max-w-xl max-w-xl">
                 <DialogHeader className="space-y-4 pb-6">
                     <DialogTitle className="text-xl font-medium">Editar timer</DialogTitle>
                 </DialogHeader>
diff --git a/src/modules/Timer/components/TimerContainer.tsx b/src/modules/Timer/components/TimerContainer.tsx
index 807a75e..c4b4949 100644
--- a/src/modules/Timer/components/TimerContainer.tsx
+++ b/src/modules/Timer/components/TimerContainer.tsx
@@ -100,9 +100,9 @@ export function TimerContainer() {
 
     return (
         <>
-            <div className="flex flex-col mx-10">
+            <div className="flex flex-col h-full relative">
                 {/* Filtro por proyecto */}
-                <div className="flex items-center gap-2 px-6 pt-4 pb-2">
+                <div className="relative flex items-center gap-2 px-6 pt-4 pb-2 z-20">
                     <label htmlFor="project-filter" className="text-sm font-medium text-muted-foreground">Filtrar por proyecto:</label>
                     <Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
                         <SelectTrigger className="bg-card w-40 h-9">
@@ -120,7 +120,7 @@ export function TimerContainer() {
                     activeCount={activeTimers.length}
                     completedCount={completedTimers.length}
                     handleCreateTimer={handleCreateTimer}
-                    className="flex-1"
+                    className="relative flex-1 z-20"
                 >
                     <TimerTabContent value="active" className="flex-1 h-full">
                         {activeTimers.length === 0 ? (
diff --git a/src/modules/Timer/components/TimerEmptyState.tsx b/src/modules/Timer/components/TimerEmptyState.tsx
index d3ebe2a..f7add99 100644
--- a/src/modules/Timer/components/TimerEmptyState.tsx
+++ b/src/modules/Timer/components/TimerEmptyState.tsx
@@ -50,7 +50,7 @@ export function TimerEmptyState({ variant, onCreateExample }: TimerEmptyStatePro
   const config = getEmptyConfig()
 
   return (
-    <Empty className="from-muted/50 to-background bg-linear-to-b from-30%">
+    <Empty className="from-muted/50 to-background bg-linear-to-b h-full w-full from-30% z-0 relative">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <IconBell />
diff --git a/src/modules/Timer/components/TimerHeader.tsx b/src/modules/Timer/components/TimerHeader.tsx
index 3014e8b..2a24763 100644
--- a/src/modules/Timer/components/TimerHeader.tsx
+++ b/src/modules/Timer/components/TimerHeader.tsx
@@ -23,14 +23,14 @@ export function TimerHeader({ timer }: TimerHeaderProps) {
                         </CardDescription>
                     )}
                 </div>
-                <Badge variant={getStatusVariant(timer.status)} className="ml-3 flex-shrink-0">
+                <Badge variant={getStatusVariant(timer.status)} className="ml-3 shrink-0">
                     {getStatusLabel(timer.status)}
                 </Badge>
             </div>
 
             {timer.config?.tags && timer.config.tags.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                    <TagIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    <TagIcon className="w-4 h-4 text-muted-foreground shrink-0" />
                     <div className="flex gap-1 flex-wrap">
                         {timer.config.tags.slice(0, 3).map((tag, index) => (
                             <Badge key={index} variant="outline" className="text-xs">
diff --git a/src/modules/Timer/components/TimerTabs.tsx b/src/modules/Timer/components/TimerTabs.tsx
index ea3b143..81fbf51 100644
--- a/src/modules/Timer/components/TimerTabs.tsx
+++ b/src/modules/Timer/components/TimerTabs.tsx
@@ -21,7 +21,7 @@ export function TimerTabs({
     handleCreateTimer
 }: TimerTabsProps) {
     return (
-        <Tabs defaultValue={defaultValue} className={cn("h-full flex flex-col z-50", className)}>
+        <Tabs defaultValue={defaultValue} className={cn("h-full flex flex-col", className)}>
             <div className="w-full flex justify-center pt-6 pb-4">
                 <div className="flex items-center justify-center gap-4 px-6 max-w-xl">
                     <TabsList className="grid grid-cols-2 gap-x-2 items-center h-full w-fit min-w-[320px] bg-muted/50 p-1 rounded-lg">