@adamosuiteservices/ui 2.11.17 → 2.11.18

package/docs/components/ui/card.md

@@ -1,1455 +1,1455 @@
-# Card
-
-Contenedor versátil con bordes redondeados, padding, sombra y borde configurables para agrupar contenido relacionado. Incluye 6 variantes de color, control de elevación y bordes, y un sistema de layout con grid automático para headers con acciones.
-
-## Características Principales
-
-- **6 variantes de color**: Default, Primary, Muted, Success, Warning, Destructive
-- **2 variantes de sombra**: Default (con elevación) y None (diseño plano, por defecto)
-- **2 variantes de borde**: Default (visible) y Transparent (invisible pero mantiene espacio)
-- **Composición modular**: 6 subcomponentes (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter)
-- **Grid automático en header**: Detecta `CardAction` y ajusta layout automáticamente con `has-data-[slot=card-action]:grid-cols-[1fr_auto]`
-- **Container queries**: CardHeader usa `@container/card-header` para layouts responsive
-- **Spacing flexible**: `gap-6` entre secciones principales, spacing auto en header/footer con bordes
-- **Bordes opcionales**: Clases `.border-b` y `.border-t` añaden separadores con padding automático
-- **Data slots**: Cada subcomponente tiene `data-slot` para targeting CSS específico
-- **Integración con otros componentes**: Background transparente para Calendar/otros componentes anidados
-
-## Importación
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardAction,
-  CardContent,
-  CardFooter,
-} from "@adamosuiteservices/ui/card";
-```
-
-## Uso Básico
-
-### Card Completa
-
-Estructura típica con todos los componentes.
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from "@adamosuiteservices/ui/card";
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content goes here.</p>
-  </CardContent>
-  <CardFooter>
-    <Button>Action</Button>
-  </CardFooter>
-</Card>;
-```
-
-### Card Simple (Solo Contenido)
-
-Para contenedores minimalistas sin header/footer.
-
-```tsx
-<Card className="w-[350px]">
-  <CardContent>
-    <h3 className="text-lg font-semibold">Simple Card</h3>
-    <p className="text-sm text-muted-foreground">
-      This is a simple card with just content.
-    </p>
-  </CardContent>
-</Card>
-```
-
-### Con Acción en Header
-
-Botón de acción que se alinea automáticamente a la derecha.
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Card className="w-[400px]">
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>You have 3 unread messages.</CardDescription>
-    <CardAction>
-      <Button variant="outline" size="sm">
-        <Icon symbol="more_horiz" />
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>{/* Notification items */}</CardContent>
-</Card>;
-```
-
-**Nota**: El grid se ajusta automáticamente cuando hay `CardAction`.
-
-## Componentes
-
-### Card
-
-Contenedor principal de la card.
-
-#### Props
-
-| Prop        | Tipo                                                                           | Default     | Descripción                                                |
-| ----------- | ------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------- |
-| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo                                 |
-| `shadow`    | `"default" \| "none"`                                                          | `"none"`    | Control de sombra (none=flat, default=elevación)           |
-| `border`    | `"default" \| "transparent"`                                                   | `"default"` | Control de borde (default=visible, transparent=invisible)  |
-| `className` | `string`                                                                       | -           | Clases CSS adicionales                                     |
-| `children`  | `ReactNode`                                                                    | -           | Contenido de la card                                       |
-
-### CardHeader
-
-Sección de encabezado con grid automático para título, descripción y acción.
-
-#### Props
-
-| Prop        | Tipo        | Descripción                                                |
-| ----------- | ----------- | ---------------------------------------------------------- |
-| `className` | `string`    | Clases CSS adicionales                                     |
-| `children`  | `ReactNode` | Usualmente contiene CardTitle, CardDescription, CardAction |
-
-**Características**:
-
-- Grid automático: 2 filas (`grid-rows-[auto_auto]`)
-- Columnas adaptativas: 1 columna por defecto, 2 cuando hay `CardAction` (`has-data-[slot=card-action]:grid-cols-[1fr_auto]`)
-- Container query: `@container/card-header` para responsive interno
-- Padding inferior automático: `[.border-b]:pb-6` cuando se agrega clase `.border-b`
-
-### CardTitle
-
-Título principal de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Texto del título       |
-
-**Estilos default**: `leading-none font-semibold`
-
-### CardDescription
-
-Descripción o subtítulo de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Texto de descripción   |
-
-**Estilos default**: `text-muted-foreground text-sm`
-
-### CardAction
-
-Botón o acción alineada a la derecha del header.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Usualmente un Button   |
-
-**Posicionamiento**:
-
-- `col-start-2 row-span-2 row-start-1`: Ocupa columna 2, ambas filas
-- `self-start justify-self-end`: Alineado superior-derecha
-
-### CardContent
-
-Contenido principal de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Contenido principal    |
-
-**Estilos default**: `px-6` (padding horizontal matching header/footer)
-
-### CardFooter
-
-Pie de la card para acciones o información adicional.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Usualmente botones     |
-
-**Estilos default**:
-
-- `flex items-center px-6`: Layout flex horizontal centrado
-- `[.border-t]:pt-6`: Padding superior automático con clase `.border-t`
-
-## Variantes
-
-### Default
-
-Card estándar con fondo blanco/oscuro según tema.
-
-```tsx
-<Card variant="default" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Default Card</CardTitle>
-    <CardDescription>Standard card appearance</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">Standard styling with default colors.</p>
-  </CardContent>
-</Card>
-```
-
-**Colores**: `bg-card text-card-foreground`
-
-### Primary
-
-Fondo azul claro para información importante.
-
-```tsx
-<Card variant="primary" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Important Information</CardTitle>
-    <CardDescription>Please read carefully</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      This is important information that requires attention.
-    </p>
-  </CardContent>
-  <CardFooter>
-    <Button>Acknowledge</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-primary-50` con iconos y texto ajustados
-
-### Success
-
-Fondo verde claro para confirmaciones exitosas.
-
-```tsx
-<Card variant="success" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Payment Successful</CardTitle>
-    <CardDescription>Your transaction completed</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">Your payment has been processed successfully.</p>
-  </CardContent>
-  <CardFooter>
-    <Button variant="outline">View Receipt</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-success-50` con texto `text-success/90`
-
-### Warning
-
-Fondo naranja/amarillo para advertencias.
-
-```tsx
-<Card variant="warning" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Storage Almost Full</CardTitle>
-    <CardDescription>You're running out of space</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">You've used 95% of storage. Consider upgrading.</p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Manage
-    </Button>
-    <Button size="sm">Upgrade</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-warning-50` con texto `text-warning/90`
-
-### Destructive
-
-Fondo rojo claro para acciones destructivas o errores.
-
-```tsx
-<Card variant="destructive" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Delete Account</CardTitle>
-    <CardDescription>This action cannot be undone</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Permanently delete your account? All data will be lost.
-    </p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <Button variant="destructive" size="sm">
-      Delete
-    </Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-destructive-50` con texto `text-destructive/90`
-
-### Muted
-
-Fondo gris claro para información secundaria.
-
-```tsx
-<Card variant="muted" className="w-full">
-  <CardHeader>
-    <CardTitle>Muted Card</CardTitle>
-    <CardDescription>Less prominent information</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Information that doesn't require immediate attention.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Colores**: `bg-muted` con texto `text-muted/90`
-
-## Variantes de Sombra
-
-Controla la elevación de las cards con la prop `shadow`. Por defecto, las cards no tienen sombra (`shadow="none"`).
-
-### Sin Sombra (Default)
-
-Card plana sin elevación para diseños limpios y modernos.
-
-```tsx
-<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Flat Card</CardTitle>
-    <CardDescription>No elevation, flat design</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Default behavior - perfect for modern, clean layouts and dense grids.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Uso**: Default para todas las cards. Ideal para diseños modernos, layouts densos, o cuando las cards ya están visualmente separadas por otros elementos.
-
-### Con Sombra
-
-Card con sombra sutil para crear profundidad cuando se necesita énfasis.
-
-```tsx
-<Card shadow="default" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card with Shadow</CardTitle>
-    <CardDescription>Subtle elevation effect</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Use shadow="default" when you need elevation to make cards stand out.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Uso**: Usa cuando necesites que cards individuales se destaquen o floten sobre el contenido de fondo.
-
-### Combinando con Variantes de Color
-
-La prop `shadow` funciona con todas las variantes de color.
-
-```tsx
-{/* Flat colored cards */}
-<Card variant="primary" shadow="none" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Flat Primary</CardTitle>
-    <CardDescription>Primary color without shadow</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Combines color variant with flat design for modern appearance.
-    </p>
-  </CardContent>
-</Card>
-
-{/* Elevated colored cards */}
-<Card variant="success" shadow="default" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Elevated Success</CardTitle>
-    <CardDescription>Success color with shadow</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Shadow adds depth to colored variants for emphasis.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Nota**: Experimenta con `shadow="none"` en grids de cards o layouts densos para un look más limpio.
-
-## Variantes de Borde
-
-El Card ofrece dos opciones de borde a través de la prop `border`:
-
-### Con Borde (Default)
-
-Por defecto, las cards tienen un borde visible que define claramente sus límites:
-
-```tsx
-<Card border="default" variant="primary">
-  <CardHeader>
-    <CardTitle>Card con Borde</CardTitle>
-    <CardDescription>Borde visible para definición clara</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      El borde ayuda a separar la card del fondo y de otros elementos.
-    </p>
-  </CardContent>
-</Card>
-```
-
-### Sin Borde
-
-Usa `border="transparent"` para ocultar el borde mientras mantienes el espaciado:
-
-```tsx
-<Card border="transparent" variant="primary">
-  <CardHeader>
-    <CardTitle>Card sin Borde</CardTitle>
-    <CardDescription>Diseño más limpio y minimalista</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Sin borde para un look más integrado con el fondo.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Nota**: `border="transparent"` mantiene el espacio del borde en el layout, a diferencia de removerlo completamente. Esto asegura consistencia en el espaciado.
-
-## Patrones Avanzados
-
-### Formulario de Login
-
-Card completa con form, inputs y múltiples acciones.
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-import { Label } from "@adamosuiteservices/ui/label";
-
-<Card className="w-full max-w-sm">
-  <CardHeader>
-    <CardTitle>Login to your account</CardTitle>
-    <CardDescription>Enter your email below to login</CardDescription>
-    <CardAction>
-      <Button variant="link">Sign Up</Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <form>
-      <div className="flex flex-col gap-6">
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div className="grid gap-2">
-          <div className="flex items-center">
-            <Label htmlFor="password">Password</Label>
-            <a
-              href="#"
-              className="ml-auto text-sm underline-offset-4 hover:underline"
-            >
-              Forgot password?
-            </a>
-          </div>
-          <Input id="password" type="password" required />
-        </div>
-      </div>
-    </form>
-  </CardContent>
-  <CardFooter className="flex-col gap-2">
-    <Button type="submit" className="w-full">
-      Login
-    </Button>
-    <Button variant="outline" className="w-full">
-      Login with Google
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Perfil de Usuario
-
-Card con avatar, stats y acciones múltiples.
-
-```tsx
-import { Avatar } from "@adamosuiteservices/ui/avatar";
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Card className="w-[380px]">
-  <CardHeader>
-    <div className="flex items-center space-x-4">
-      <Avatar className="h-12 w-12">
-        <Icon symbol="person" />
-      </Avatar>
-      <div>
-        <CardTitle>Sofia Davis</CardTitle>
-        <CardDescription>Product Designer</CardDescription>
-      </div>
-    </div>
-    <CardAction>
-      <Button variant="outline" size="sm">
-        Follow
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <div className="text-sm text-muted-foreground">
-      Passionate about creating beautiful user experiences.
-    </div>
-  </CardContent>
-  <CardFooter className="flex justify-between">
-    <div className="flex space-x-4 text-sm text-muted-foreground">
-      <div className="flex items-center">
-        <Icon symbol="favorite" className="mr-1 text-sm" />
-        256
-      </div>
-      <div className="flex items-center">
-        <Icon symbol="star" className="mr-1 text-sm" />
-        98
-      </div>
-    </div>
-    <div className="flex space-x-1">
-      <Button variant="ghost" size="sm">
-        <Icon symbol="share" />
-      </Button>
-      <Button variant="ghost" size="sm">
-        <Icon symbol="open_in_new" />
-      </Button>
-    </div>
-  </CardFooter>
-</Card>;
-```
-
-### Card de Producto
-
-E-commerce card con imagen, badge, precio y acciones.
-
-```tsx
-import { Badge } from "@adamosuiteservices/ui/badge";
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Card className="w-[350px]">
-  <CardHeader>
-    <div className="aspect-square rounded-md bg-muted"></div>
-  </CardHeader>
-  <CardContent>
-    <div className="space-y-2">
-      <Badge variant="secondary">Electronics</Badge>
-      <CardTitle>Wireless Headphones</CardTitle>
-      <CardDescription>
-        Premium wireless headphones with noise cancellation.
-      </CardDescription>
-      <div className="flex items-center justify-between">
-        <div className="text-2xl font-bold">$299.99</div>
-        <div className="flex items-center text-sm text-muted-foreground">
-          <Icon symbol="star" className="mr-1 text-lg fill-current" />
-          4.5 (128)
-        </div>
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter className="flex gap-2">
-    <Button className="flex-1">
-      <Icon symbol="credit_card" />
-      Add to Cart
-    </Button>
-    <Button variant="outline" size="sm">
-      <Icon symbol="favorite" />
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Stats Cards (Dashboard)
-
-Grid de cards para métricas con iconos y tendencias.
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-      <Icon symbol="payments" className="text-lg text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">$45,231.89</div>
-      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-      <Icon symbol="person" className="text-lg text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+2350</div>
-      <p className="text-xs text-muted-foreground">+180.1% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Sales</CardTitle>
-      <Icon symbol="credit_card" className="text-lg text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+12,234</div>
-      <p className="text-xs text-muted-foreground">+19% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-      <Icon symbol="person" className="text-lg text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+573</div>
-      <p className="text-xs text-muted-foreground">+201 since last hour</p>
-    </CardContent>
-  </Card>
-</div>;
-```
-
-### Card de Notificaciones
-
-Lista de notificaciones con items y acción de marcar leído.
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Card className="w-[380px]">
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>You have 3 unread messages.</CardDescription>
-  </CardHeader>
-  <CardContent className="grid gap-4">
-    <div className="flex items-center space-x-4 rounded-md border p-4">
-      <Icon symbol="notifications" className="text-lg" />
-      <div className="flex-1 space-y-1">
-        <p className="text-sm font-medium leading-none">Push Notifications</p>
-        <p className="text-sm text-muted-foreground">
-          Send notifications to device.
-        </p>
-      </div>
-    </div>
-    <div className="flex items-center space-x-4 rounded-md border p-4">
-      <Icon symbol="mail" className="text-lg" />
-      <div className="flex-1 space-y-1">
-        <p className="text-sm font-medium leading-none">Email Notifications</p>
-        <p className="text-sm text-muted-foreground">
-          Send notifications to email.
-        </p>
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button className="w-full">
-      <Icon symbol="check" />
-      Mark all as read
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Con Separadores (Border)
-
-Usa `.border-b` y `.border-t` para separadores visuales.
-
-```tsx
-<Card className="w-[350px]">
-  <CardHeader className="border-b">
-    <CardTitle>Settings</CardTitle>
-    <CardDescription>Manage your preferences</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <div className="space-y-4">{/* Settings content */}</div>
-  </CardContent>
-  <CardFooter className="border-t">
-    <Button className="w-full">Save Changes</Button>
-  </CardFooter>
-</Card>
-```
-
-**Nota**: El padding se ajusta automáticamente (`pb-6` en header, `pt-6` en footer).
-
-### Grid de Variantes
-
-Mostrar todas las variantes en una vista comparativa.
-
-```tsx
-<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-  <Card variant="default">
-    <CardHeader>
-      <CardTitle>Default</CardTitle>
-      <CardDescription>Standard card</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Standard styling.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="primary">
-    <CardHeader>
-      <CardTitle>Primary</CardTitle>
-      <CardDescription>Important info</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Highlight important content.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="success">
-    <CardHeader>
-      <CardTitle>Success</CardTitle>
-      <CardDescription>Success message</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Successful operations.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="warning">
-    <CardHeader>
-      <CardTitle>Warning</CardTitle>
-      <CardDescription>Caution message</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Important warnings.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="destructive">
-    <CardHeader>
-      <CardTitle>Destructive</CardTitle>
-      <CardDescription>Error or danger</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Errors or destructive actions.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="muted">
-    <CardHeader>
-      <CardTitle>Muted</CardTitle>
-      <CardDescription>Secondary info</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Less important information.</p>
-    </CardContent>
-  </Card>
-</div>
-```
-
-### Header con Layout Custom
-
-Override del grid para layouts específicos.
-
-```tsx
-{
-  /* Horizontal layout con custom spacing */
-}
-<Card className="w-[400px]">
-  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-    <CardTitle className="text-sm font-medium">Custom Layout</CardTitle>
-    <Badge>New</Badge>
-  </CardHeader>
-  <CardContent>
-    <div className="text-2xl font-bold">Content</div>
-  </CardContent>
-</Card>;
-```
-
-### Footer con Múltiples Acciones
-
-Diferentes arreglos de botones.
-
-```tsx
-{
-  /* Botones horizontales con gap */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Confirm Action</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Are you sure?</p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <Button size="sm">Confirm</Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* Botones apilados verticalmente */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Choose Option</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Select an action:</p>
-  </CardContent>
-  <CardFooter className="flex-col gap-2">
-    <Button className="w-full">Primary Action</Button>
-    <Button variant="outline" className="w-full">
-      Secondary
-    </Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* Acciones distribuidas */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Actions</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Multiple actions available.</p>
-  </CardContent>
-  <CardFooter className="justify-between">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <div className="flex gap-2">
-      <Button variant="outline" size="sm">
-        Save Draft
-      </Button>
-      <Button size="sm">Publish</Button>
-    </div>
-  </CardFooter>
-</Card>;
-```
-
-## Casos de Uso Comunes
-
-### Authentication Forms
-
-```tsx
-<Card className="w-full max-w-md">
-  <CardHeader>
-    <CardTitle>Create Account</CardTitle>
-    <CardDescription>Sign up to get started</CardDescription>
-  </CardHeader>
-  <CardContent className="space-y-4">
-    <Input type="text" placeholder="Full Name" />
-    <Input type="email" placeholder="Email" />
-    <Input type="password" placeholder="Password" />
-  </CardContent>
-  <CardFooter>
-    <Button className="w-full">Create Account</Button>
-  </CardFooter>
-</Card>
-```
-
-### Dashboard Widgets
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Recent Activity</CardTitle>
-    <CardDescription>Your latest actions</CardDescription>
-    <CardAction>
-      <Button variant="ghost" size="sm">
-        View All
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>{/* Activity list */}</CardContent>
-</Card>
-```
-
-### Settings Panels
-
-```tsx
-<Card className="border-b">
-  <CardHeader>
-    <CardTitle>Account Settings</CardTitle>
-    <CardDescription>Manage your account preferences</CardDescription>
-  </CardHeader>
-  <CardContent className="space-y-4">{/* Settings options */}</CardContent>
-  <CardFooter className="border-t">
-    <Button>Save Changes</Button>
-  </CardFooter>
-</Card>
-```
-
-### Pricing Cards
-
-```tsx
-<div className="grid gap-4 md:grid-cols-3">
-  <Card>
-    <CardHeader>
-      <CardTitle>Basic</CardTitle>
-      <CardDescription>For individuals</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <div className="text-3xl font-bold">$9/mo</div>
-      <ul className="mt-4 space-y-2 text-sm">
-        <li>✓ Feature 1</li>
-        <li>✓ Feature 2</li>
-      </ul>
-    </CardContent>
-    <CardFooter>
-      <Button variant="outline" className="w-full">
-        Choose Plan
-      </Button>
-    </CardFooter>
-  </Card>
-  {/* More pricing tiers */}
-</div>
-```
-
-### Status/Alert Cards
-
-```tsx
-<Card variant="warning">
-  <CardHeader>
-    <CardTitle>Action Required</CardTitle>
-    <CardDescription>Your subscription expires soon</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Renew your subscription to continue accessing premium features.
-    </p>
-  </CardContent>
-  <CardFooter>
-    <Button>Renew Now</Button>
-  </CardFooter>
-</Card>
-```
-
-## Mejores Prácticas
-
-### Usa Anchos Fijos para Consistencia
-
-```tsx
-{
-  /* ✅ Correcto - Ancho consistente */
-}
-<Card className="w-[350px]">
-  <CardContent>Consistent width</CardContent>
-</Card>;
-
-{
-  /* ✅ También correcto - max-w para responsive */
-}
-<Card className="w-full max-w-md">
-  <CardContent>Responsive width</CardContent>
-</Card>;
-
-{
-  /* ❌ Evitar - Sin ancho puede expandirse inesperadamente */
-}
-<Card>
-  <CardContent>No width constraint</CardContent>
-</Card>;
-```
-
-### Variantes Semánticas
-
-```tsx
-{/* ✅ Correcto - Variante según significado */}
-<Card variant="success">
-  <CardContent>Payment processed!</CardContent>
-</Card>
-
-<Card variant="destructive">
-  <CardContent>Error occurred</CardContent>
-</Card>
-
-{/* ❌ Incorrecto - Variante no semántica */}
-<Card variant="success">
-  <CardContent>Error occurred</CardContent>  {/* Confuso */}
-</Card>
-```
-
-### Uso de Sombras y Bordes
-
-```tsx
-{/* ✅ Correcto - Default sin sombra para diseño plano */}
-<Card>
-  <CardContent>Clean, flat design</CardContent>
-</Card>
-
-{/* ✅ Correcto - Shadow para cards flotantes o destacadas */}
-<Card shadow="default">
-  <CardContent>Elevated card with depth</CardContent>
-</Card>
-
-{/* ✅ Correcto - Border transparent para integración con fondo */}
-<Card border="transparent" variant="muted">
-  <CardContent>Blends with background</CardContent>
-</Card>
-
-{/* ⚠️ Evitar - Shadow sin propósito específico */}
-<Card shadow="default">
-  <CardContent>Unnecessary elevation</CardContent>
-</Card>
-```
-
-**Recomendaciones**:
-
-- Usa `shadow="none"` (default) para layouts densos y diseños modernos
-- Aplica `shadow="default"` para destacar cards importantes o flotantes
-- Usa `border="transparent"` en cards sobre fondos de color similar
-- Mantén `border="default"` para máxima claridad y separación
-
-### Estructura de Header Completa
-
-```tsx
-{
-  /* ✅ Correcto - Título + Descripción */
-}
-<CardHeader>
-  <CardTitle>Title</CardTitle>
-  <CardDescription>Description</CardDescription>
-</CardHeader>;
-
-{
-  /* ⚠️ Aceptable - Solo título */
-}
-<CardHeader>
-  <CardTitle>Title Only</CardTitle>
-</CardHeader>;
-
-{
-  /* ❌ Evitar - Solo descripción sin título */
-}
-<CardHeader>
-  <CardDescription>No title</CardDescription>
-</CardHeader>;
-```
-
-### CardAction Solo en CardHeader
-
-```tsx
-{
-  /* ✅ Correcto - CardAction dentro de CardHeader */
-}
-<CardHeader>
-  <CardTitle>Title</CardTitle>
-  <CardDescription>Description</CardDescription>
-  <CardAction>
-    <Button size="sm">Action</Button>
-  </CardAction>
-</CardHeader>;
-
-{
-  /* ❌ Incorrecto - CardAction fuera de CardHeader */
-}
-<Card>
-  <CardTitle>Title</CardTitle>
-  <CardAction>
-    <Button>Won't position correctly</Button>
-  </CardAction>
-</Card>;
-```
-
-### Footer Flex para Múltiples Botones
-
-```tsx
-{
-  /* ✅ Correcto - Gap entre botones */
-}
-<CardFooter className="gap-2">
-  <Button variant="outline">Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>;
-
-{
-  /* ✅ Correcto - Full width individual */
-}
-<CardFooter className="flex-col gap-2">
-  <Button className="w-full">Primary</Button>
-  <Button variant="outline" className="w-full">
-    Secondary
-  </Button>
-</CardFooter>;
-
-{
-  /* ❌ Evitar - Sin gap entre botones */
-}
-<CardFooter>
-  <Button>Button1</Button>
-  <Button>Button2</Button> {/* Se pegan */}
-</CardFooter>;
-```
-
-### Bordes Opcionales
-
-```tsx
-{
-  /* ✅ Correcto - Border con padding automático */
-}
-<Card>
-  <CardHeader className="border-b">
-    <CardTitle>Title</CardTitle>
-  </CardHeader>
-  <CardContent>Content</CardContent>
-  <CardFooter className="border-t">
-    <Button>Action</Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* ❌ Evitar - Border sin la clase en header/footer */
-}
-<Card className="border-b">
-  {" "}
-  {/* No aplica padding correcto */}
-  <CardHeader>
-    <CardTitle>Title</CardTitle>
-  </CardHeader>
-</Card>;
-```
-
-### Grid en Stats Cards
-
-```tsx
-{
-  /* ✅ Correcto - Override spacing cuando es necesario */
-}
-<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-  <CardTitle className="text-sm font-medium">Stat</CardTitle>
-  <Icon className="h-4 w-4 text-muted-foreground" />
-</CardHeader>;
-
-{
-  /* ❌ Incorrecto - Usar grid default con layout horizontal */
-}
-<CardHeader className="flex-row">
-  {" "}
-  {/* Grid sigue activo */}
-  <CardTitle>Stat</CardTitle>
-  <Icon />
-</CardHeader>;
-```
-
-### Uso de Shadow
-
-```tsx
-{/* ✅ Correcto - Shadow para cards individuales o destacadas */}
-<Card shadow="default" className="w-[350px]">
-  <CardContent>
-    Stands out with subtle elevation
-  </CardContent>
-</Card>
-
-{/* ✅ Correcto - Sin shadow para grids densos */}
-<div className="grid gap-4 md:grid-cols-3">
-  <Card shadow="none">
-    <CardContent>Flat design in dense layout</CardContent>
-  </Card>
-  <Card shadow="none">
-    <CardContent>Flat design in dense layout</CardContent>
-  </Card>
-  <Card shadow="none">
-    <CardContent>Flat design in dense layout</CardContent>
-  </Card>
-</div>
-
-{/* ✅ Correcto - Sin shadow cuando ya hay separación visual */}
-<div className="space-y-4">
-  <Card shadow="none">
-    <CardContent>Spacing provides separation</CardContent>
-  </Card>
-  <Card shadow="none">
-    <CardContent>No shadow needed here</CardContent>
-  </Card>
-</div>
-
-{/* ⚠️ Considerar - Mucha sombra en layouts densos */}
-<div className="grid gap-2 md:grid-cols-4">
-  <Card shadow="default">...</Card>  {/* Puede verse pesado */}
-  <Card shadow="default">...</Card>
-  <Card shadow="default">...</Card>
-  <Card shadow="default">...</Card>
-</div>
-```
-
-## Notas de Implementación
-
-- **Basado en CVA**: Usa `class-variance-authority` para variantes de color, sombra y borde
-- **Data Slots**: Cada componente tiene `data-slot` para CSS targeting específico (`data-slot="card"`, `data-slot="card-header"`, etc.)
-- **Grid Automático**: CardHeader usa `has-data-[slot=card-action]:grid-cols-[1fr_auto]` para detectar CardAction y ajustar layout
-- **Container Queries**: CardHeader tiene `@container/card-header` para responsive interno (requiere Tailwind CSS container queries)
-- **Spacing Consistente**: `gap-6` entre secciones (header, content, footer), `px-6` horizontal en todas las secciones
-- **Padding Condicional**: `.border-b` y `.border-t` triggers automáticos para `pb-6` y `pt-6` respectivamente
-- **Variantes de Color**: Cada variante ajusta `bg-*-50` y `text-*-foreground`, con ajustes para iconos SVG (`[&>svg]:text-current`)
-- **Variantes de Sombra**: Dos opciones (`default` con `shadow-xs`, `none` sin sombra por defecto) para control de elevación
-- **Variantes de Borde**: Dos opciones (`default` con borde visible, `transparent` con borde invisible pero mantiene espaciado)
-- **Rounded Corners**: `rounded-3xl` por defecto para esquinas suaves
-- **Flex Column**: Card root usa `flex flex-col gap-6` para layout vertical automático
-
-## Accesibilidad
-
-### Estructura Semántica
-
-Cards usan `<div>` por defecto, pero considera añadir roles ARIA cuando sea apropiado.
-
-```tsx
-{
-  /* Para cards interactivas */
-}
-<Card role="article" aria-labelledby="card-title">
-  <CardHeader>
-    <CardTitle id="card-title">Article Title</CardTitle>
-  </CardHeader>
-  <CardContent>Content</CardContent>
-</Card>;
-
-{
-  /* Para cards clickeables */
-}
-<Card
-  role="button"
-  tabIndex={0}
-  onClick={handleClick}
-  onKeyDown={(e) => e.key === "Enter" && handleClick()}
->
-  <CardContent>Clickable card</CardContent>
-</Card>;
-```
-
-### Labels para CardAction
-
-```tsx
-{
-  /* ✅ Correcto - aria-label descriptiva */
-}
-<CardAction>
-  <Button variant="outline" size="sm" aria-label="More options">
-    <MoreHorizontalIcon />
-  </Button>
-</CardAction>;
-
-{
-  /* ❌ Incorrecto - Sin label para icono solo */
-}
-<CardAction>
-  <Button variant="outline" size="sm">
-    <MoreHorizontalIcon />
-  </Button>
-</CardAction>;
-```
-
-### Formularios Accesibles
-
-```tsx
-{
-  /* ✅ Correcto - Labels asociadas */
-}
-<CardContent>
-  <div className="space-y-4">
-    <div className="grid gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" />
-    </div>
-  </div>
-</CardContent>;
-```
-
-### Focus Management
-
-Cards no son focuseables por defecto. Si necesitas interactividad:
-
-```tsx
-{
-  /* Para cards clickeables */
-}
-<Card
-  tabIndex={0}
-  role="button"
-  className="cursor-pointer hover:shadow-md transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-  onClick={handleClick}
->
-  <CardContent>Interactive card</CardContent>
-</Card>;
-```
-
-## Troubleshooting
-
-### CardAction No Se Alinea a la Derecha
-
-**Problema**: CardAction no aparece en la posición correcta.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - CardAction fuera de CardHeader
-<Card>
-  <CardTitle>Title</CardTitle>
-  <CardAction>
-    <Button>Action</Button>
-  </CardAction>
-</Card>
-
-// ✅ Solución - CardAction dentro de CardHeader
-<Card>
-  <CardHeader>
-    <CardTitle>Title</CardTitle>
-    <CardDescription>Description</CardDescription>
-    <CardAction>
-      <Button>Action</Button>
-    </CardAction>
-  </CardHeader>
-</Card>
-```
-
-### Gap Excesivo entre Secciones
-
-**Problema**: Mucho espacio entre header/content/footer.
-
-**Solución**:
-
-```tsx
-// ✅ El gap-6 es intencional, pero puedes reducirlo
-<Card className="gap-4">  {/* Override gap-6 */}
-  <CardHeader>...</CardHeader>
-  <CardContent>...</CardContent>
-</Card>
-
-// O eliminar gap completamente
-<Card className="gap-0">
-  <CardHeader>...</CardHeader>
-  <CardContent>...</CardContent>
-</Card>
-```
-
-### Bordes No Muestran Padding
-
-**Problema**: `.border-b` o `.border-t` no agregan padding.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - Border en elemento incorrecto
-<Card className="border-b">
-  <CardHeader>...</CardHeader>
-</Card>
-
-// ✅ Solución - Border en CardHeader o CardFooter
-<Card>
-  <CardHeader className="border-b">...</CardHeader>
-  <CardContent>...</CardContent>
-  <CardFooter className="border-t">...</CardFooter>
-</Card>
-```
-
-### Variante No Cambia Color
-
-**Problema**: Variante primary/success/etc no aplica colores.
-
-**Solución**:
-
-```tsx
-// ✅ Verifica que la prop sea en Card root
-<Card variant="primary">  {/* Correcto */}
-  <CardHeader>...</CardHeader>
-</Card>
-
-// ❌ No funciona en subcomponentes
-<Card>
-  <CardHeader variant="primary">  {/* No existe esta prop */}
-    ...
-  </CardHeader>
-</Card>
-```
-
-### Stats Cards con Layout Incorrecto
-
-**Problema**: Íconos y títulos no se alinean horizontalmente.
-
-**Solución**:
-
-```tsx
-// ✅ Override grid con flex
-<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-  <CardTitle className="text-sm font-medium">Revenue</CardTitle>
-  <DollarSignIcon className="h-4 w-4" />
-</CardHeader>
-```
-
-### Footer Buttons No Se Distribuyen
-
-**Problema**: Botones en footer se pegan sin espacio.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - Sin gap
-<CardFooter>
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-
-// ✅ Solución - Añade gap
-<CardFooter className="gap-2">
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-
-// ✅ O usa justify-between
-<CardFooter className="justify-between">
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-```
-
-## Referencias
-
-- **CVA (Class Variance Authority)**: https://cva.style/docs
-- **shadcn/ui Card**: https://ui.shadcn.com/docs/components/card
-- **Tailwind Container Queries**: https://tailwindcss.com/docs/hover-focus-and-other-states#container-queries
-- **ARIA Article Role**: https://www.w3.org/TR/wai-aria-1.2/#article
+# Card
+
+Contenedor versátil con bordes redondeados, padding, sombra y borde configurables para agrupar contenido relacionado. Incluye 6 variantes de color, control de elevación y bordes, y un sistema de layout con grid automático para headers con acciones.
+
+## Características Principales
+
+- **6 variantes de color**: Default, Primary, Muted, Success, Warning, Destructive
+- **2 variantes de sombra**: Default (con elevación) y None (diseño plano, por defecto)
+- **2 variantes de borde**: Default (visible) y Transparent (invisible pero mantiene espacio)
+- **Composición modular**: 6 subcomponentes (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter)
+- **Grid automático en header**: Detecta `CardAction` y ajusta layout automáticamente con `has-data-[slot=card-action]:grid-cols-[1fr_auto]`
+- **Container queries**: CardHeader usa `@container/card-header` para layouts responsive
+- **Spacing flexible**: `gap-6` entre secciones principales, spacing auto en header/footer con bordes
+- **Bordes opcionales**: Clases `.border-b` y `.border-t` añaden separadores con padding automático
+- **Data slots**: Cada subcomponente tiene `data-slot` para targeting CSS específico
+- **Integración con otros componentes**: Background transparente para Calendar/otros componentes anidados
+
+## Importación
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from "@adamosuiteservices/ui/card";
+```
+
+## Uso Básico
+
+### Card Completa
+
+Estructura típica con todos los componentes.
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@adamosuiteservices/ui/card";
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content goes here.</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>;
+```
+
+### Card Simple (Solo Contenido)
+
+Para contenedores minimalistas sin header/footer.
+
+```tsx
+<Card className="w-[350px]">
+  <CardContent>
+    <h3 className="text-lg font-semibold">Simple Card</h3>
+    <p className="text-sm text-muted-foreground">
+      This is a simple card with just content.
+    </p>
+  </CardContent>
+</Card>
+```
+
+### Con Acción en Header
+
+Botón de acción que se alinea automáticamente a la derecha.
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Card className="w-[400px]">
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+    <CardAction>
+      <Button variant="outline" size="sm">
+        <Icon symbol="more_horiz" />
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>{/* Notification items */}</CardContent>
+</Card>;
+```
+
+**Nota**: El grid se ajusta automáticamente cuando hay `CardAction`.
+
+## Componentes
+
+### Card
+
+Contenedor principal de la card.
+
+#### Props
+
+| Prop        | Tipo                                                                           | Default     | Descripción                                                |
+| ----------- | ------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------- |
+| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo                                 |
+| `shadow`    | `"default" \| "none"`                                                          | `"none"`    | Control de sombra (none=flat, default=elevación)           |
+| `border`    | `"default" \| "transparent"`                                                   | `"default"` | Control de borde (default=visible, transparent=invisible)  |
+| `className` | `string`                                                                       | -           | Clases CSS adicionales                                     |
+| `children`  | `ReactNode`                                                                    | -           | Contenido de la card                                       |
+
+### CardHeader
+
+Sección de encabezado con grid automático para título, descripción y acción.
+
+#### Props
+
+| Prop        | Tipo        | Descripción                                                |
+| ----------- | ----------- | ---------------------------------------------------------- |
+| `className` | `string`    | Clases CSS adicionales                                     |
+| `children`  | `ReactNode` | Usualmente contiene CardTitle, CardDescription, CardAction |
+
+**Características**:
+
+- Grid automático: 2 filas (`grid-rows-[auto_auto]`)
+- Columnas adaptativas: 1 columna por defecto, 2 cuando hay `CardAction` (`has-data-[slot=card-action]:grid-cols-[1fr_auto]`)
+- Container query: `@container/card-header` para responsive interno
+- Padding inferior automático: `[.border-b]:pb-6` cuando se agrega clase `.border-b`
+
+### CardTitle
+
+Título principal de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Texto del título       |
+
+**Estilos default**: `leading-none font-semibold`
+
+### CardDescription
+
+Descripción o subtítulo de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Texto de descripción   |
+
+**Estilos default**: `text-muted-foreground text-sm`
+
+### CardAction
+
+Botón o acción alineada a la derecha del header.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Usualmente un Button   |
+
+**Posicionamiento**:
+
+- `col-start-2 row-span-2 row-start-1`: Ocupa columna 2, ambas filas
+- `self-start justify-self-end`: Alineado superior-derecha
+
+### CardContent
+
+Contenido principal de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Contenido principal    |
+
+**Estilos default**: `px-6` (padding horizontal matching header/footer)
+
+### CardFooter
+
+Pie de la card para acciones o información adicional.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Usualmente botones     |
+
+**Estilos default**:
+
+- `flex items-center px-6`: Layout flex horizontal centrado
+- `[.border-t]:pt-6`: Padding superior automático con clase `.border-t`
+
+## Variantes
+
+### Default
+
+Card estándar con fondo blanco/oscuro según tema.
+
+```tsx
+<Card variant="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Default Card</CardTitle>
+    <CardDescription>Standard card appearance</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">Standard styling with default colors.</p>
+  </CardContent>
+</Card>
+```
+
+**Colores**: `bg-card text-card-foreground`
+
+### Primary
+
+Fondo azul claro para información importante.
+
+```tsx
+<Card variant="primary" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Important Information</CardTitle>
+    <CardDescription>Please read carefully</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      This is important information that requires attention.
+    </p>
+  </CardContent>
+  <CardFooter>
+    <Button>Acknowledge</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-primary-50` con iconos y texto ajustados
+
+### Success
+
+Fondo verde claro para confirmaciones exitosas.
+
+```tsx
+<Card variant="success" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Payment Successful</CardTitle>
+    <CardDescription>Your transaction completed</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">Your payment has been processed successfully.</p>
+  </CardContent>
+  <CardFooter>
+    <Button variant="outline">View Receipt</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-success-50` con texto `text-success/90`
+
+### Warning
+
+Fondo naranja/amarillo para advertencias.
+
+```tsx
+<Card variant="warning" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Storage Almost Full</CardTitle>
+    <CardDescription>You're running out of space</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">You've used 95% of storage. Consider upgrading.</p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Manage
+    </Button>
+    <Button size="sm">Upgrade</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-warning-50` con texto `text-warning/90`
+
+### Destructive
+
+Fondo rojo claro para acciones destructivas o errores.
+
+```tsx
+<Card variant="destructive" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Delete Account</CardTitle>
+    <CardDescription>This action cannot be undone</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Permanently delete your account? All data will be lost.
+    </p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <Button variant="destructive" size="sm">
+      Delete
+    </Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-destructive-50` con texto `text-destructive/90`
+
+### Muted
+
+Fondo gris claro para información secundaria.
+
+```tsx
+<Card variant="muted" className="w-full">
+  <CardHeader>
+    <CardTitle>Muted Card</CardTitle>
+    <CardDescription>Less prominent information</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Information that doesn't require immediate attention.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Colores**: `bg-muted` con texto `text-muted/90`
+
+## Variantes de Sombra
+
+Controla la elevación de las cards con la prop `shadow`. Por defecto, las cards no tienen sombra (`shadow="none"`).
+
+### Sin Sombra (Default)
+
+Card plana sin elevación para diseños limpios y modernos.
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Flat Card</CardTitle>
+    <CardDescription>No elevation, flat design</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Default behavior - perfect for modern, clean layouts and dense grids.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Uso**: Default para todas las cards. Ideal para diseños modernos, layouts densos, o cuando las cards ya están visualmente separadas por otros elementos.
+
+### Con Sombra
+
+Card con sombra sutil para crear profundidad cuando se necesita énfasis.
+
+```tsx
+<Card shadow="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card with Shadow</CardTitle>
+    <CardDescription>Subtle elevation effect</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Use shadow="default" when you need elevation to make cards stand out.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Uso**: Usa cuando necesites que cards individuales se destaquen o floten sobre el contenido de fondo.
+
+### Combinando con Variantes de Color
+
+La prop `shadow` funciona con todas las variantes de color.
+
+```tsx
+{/* Flat colored cards */}
+<Card variant="primary" shadow="none" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Flat Primary</CardTitle>
+    <CardDescription>Primary color without shadow</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Combines color variant with flat design for modern appearance.
+    </p>
+  </CardContent>
+</Card>
+
+{/* Elevated colored cards */}
+<Card variant="success" shadow="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Elevated Success</CardTitle>
+    <CardDescription>Success color with shadow</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Shadow adds depth to colored variants for emphasis.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Nota**: Experimenta con `shadow="none"` en grids de cards o layouts densos para un look más limpio.
+
+## Variantes de Borde
+
+El Card ofrece dos opciones de borde a través de la prop `border`:
+
+### Con Borde (Default)
+
+Por defecto, las cards tienen un borde visible que define claramente sus límites:
+
+```tsx
+<Card border="default" variant="primary">
+  <CardHeader>
+    <CardTitle>Card con Borde</CardTitle>
+    <CardDescription>Borde visible para definición clara</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      El borde ayuda a separar la card del fondo y de otros elementos.
+    </p>
+  </CardContent>
+</Card>
+```
+
+### Sin Borde
+
+Usa `border="transparent"` para ocultar el borde mientras mantienes el espaciado:
+
+```tsx
+<Card border="transparent" variant="primary">
+  <CardHeader>
+    <CardTitle>Card sin Borde</CardTitle>
+    <CardDescription>Diseño más limpio y minimalista</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Sin borde para un look más integrado con el fondo.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Nota**: `border="transparent"` mantiene el espacio del borde en el layout, a diferencia de removerlo completamente. Esto asegura consistencia en el espaciado.
+
+## Patrones Avanzados
+
+### Formulario de Login
+
+Card completa con form, inputs y múltiples acciones.
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+import { Label } from "@adamosuiteservices/ui/label";
+
+<Card className="w-full max-w-sm">
+  <CardHeader>
+    <CardTitle>Login to your account</CardTitle>
+    <CardDescription>Enter your email below to login</CardDescription>
+    <CardAction>
+      <Button variant="link">Sign Up</Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div className="flex flex-col gap-6">
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="grid gap-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">Password</Label>
+            <a
+              href="#"
+              className="ml-auto text-sm underline-offset-4 hover:underline"
+            >
+              Forgot password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter className="flex-col gap-2">
+    <Button type="submit" className="w-full">
+      Login
+    </Button>
+    <Button variant="outline" className="w-full">
+      Login with Google
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Perfil de Usuario
+
+Card con avatar, stats y acciones múltiples.
+
+```tsx
+import { Avatar } from "@adamosuiteservices/ui/avatar";
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Card className="w-[380px]">
+  <CardHeader>
+    <div className="flex items-center space-x-4">
+      <Avatar className="h-12 w-12">
+        <Icon symbol="person" />
+      </Avatar>
+      <div>
+        <CardTitle>Sofia Davis</CardTitle>
+        <CardDescription>Product Designer</CardDescription>
+      </div>
+    </div>
+    <CardAction>
+      <Button variant="outline" size="sm">
+        Follow
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>
+    <div className="text-sm text-muted-foreground">
+      Passionate about creating beautiful user experiences.
+    </div>
+  </CardContent>
+  <CardFooter className="flex justify-between">
+    <div className="flex space-x-4 text-sm text-muted-foreground">
+      <div className="flex items-center">
+        <Icon symbol="favorite" className="mr-1 text-sm" />
+        256
+      </div>
+      <div className="flex items-center">
+        <Icon symbol="star" className="mr-1 text-sm" />
+        98
+      </div>
+    </div>
+    <div className="flex space-x-1">
+      <Button variant="ghost" size="sm">
+        <Icon symbol="share" />
+      </Button>
+      <Button variant="ghost" size="sm">
+        <Icon symbol="open_in_new" />
+      </Button>
+    </div>
+  </CardFooter>
+</Card>;
+```
+
+### Card de Producto
+
+E-commerce card con imagen, badge, precio y acciones.
+
+```tsx
+import { Badge } from "@adamosuiteservices/ui/badge";
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Card className="w-[350px]">
+  <CardHeader>
+    <div className="aspect-square rounded-md bg-muted"></div>
+  </CardHeader>
+  <CardContent>
+    <div className="space-y-2">
+      <Badge variant="secondary">Electronics</Badge>
+      <CardTitle>Wireless Headphones</CardTitle>
+      <CardDescription>
+        Premium wireless headphones with noise cancellation.
+      </CardDescription>
+      <div className="flex items-center justify-between">
+        <div className="text-2xl font-bold">$299.99</div>
+        <div className="flex items-center text-sm text-muted-foreground">
+          <Icon symbol="star" className="mr-1 text-lg fill-current" />
+          4.5 (128)
+        </div>
+      </div>
+    </div>
+  </CardContent>
+  <CardFooter className="flex gap-2">
+    <Button className="flex-1">
+      <Icon symbol="credit_card" />
+      Add to Cart
+    </Button>
+    <Button variant="outline" size="sm">
+      <Icon symbol="favorite" />
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Stats Cards (Dashboard)
+
+Grid de cards para métricas con iconos y tendencias.
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+      <Icon symbol="payments" className="text-lg text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">$45,231.89</div>
+      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+      <Icon symbol="person" className="text-lg text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+2350</div>
+      <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Sales</CardTitle>
+      <Icon symbol="credit_card" className="text-lg text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+12,234</div>
+      <p className="text-xs text-muted-foreground">+19% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+      <Icon symbol="person" className="text-lg text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+573</div>
+      <p className="text-xs text-muted-foreground">+201 since last hour</p>
+    </CardContent>
+  </Card>
+</div>;
+```
+
+### Card de Notificaciones
+
+Lista de notificaciones con items y acción de marcar leído.
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Card className="w-[380px]">
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+  </CardHeader>
+  <CardContent className="grid gap-4">
+    <div className="flex items-center space-x-4 rounded-md border p-4">
+      <Icon symbol="notifications" className="text-lg" />
+      <div className="flex-1 space-y-1">
+        <p className="text-sm font-medium leading-none">Push Notifications</p>
+        <p className="text-sm text-muted-foreground">
+          Send notifications to device.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-center space-x-4 rounded-md border p-4">
+      <Icon symbol="mail" className="text-lg" />
+      <div className="flex-1 space-y-1">
+        <p className="text-sm font-medium leading-none">Email Notifications</p>
+        <p className="text-sm text-muted-foreground">
+          Send notifications to email.
+        </p>
+      </div>
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button className="w-full">
+      <Icon symbol="check" />
+      Mark all as read
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Con Separadores (Border)
+
+Usa `.border-b` y `.border-t` para separadores visuales.
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader className="border-b">
+    <CardTitle>Settings</CardTitle>
+    <CardDescription>Manage your preferences</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <div className="space-y-4">{/* Settings content */}</div>
+  </CardContent>
+  <CardFooter className="border-t">
+    <Button className="w-full">Save Changes</Button>
+  </CardFooter>
+</Card>
+```
+
+**Nota**: El padding se ajusta automáticamente (`pb-6` en header, `pt-6` en footer).
+
+### Grid de Variantes
+
+Mostrar todas las variantes en una vista comparativa.
+
+```tsx
+<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  <Card variant="default">
+    <CardHeader>
+      <CardTitle>Default</CardTitle>
+      <CardDescription>Standard card</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Standard styling.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="primary">
+    <CardHeader>
+      <CardTitle>Primary</CardTitle>
+      <CardDescription>Important info</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Highlight important content.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="success">
+    <CardHeader>
+      <CardTitle>Success</CardTitle>
+      <CardDescription>Success message</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Successful operations.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="warning">
+    <CardHeader>
+      <CardTitle>Warning</CardTitle>
+      <CardDescription>Caution message</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Important warnings.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="destructive">
+    <CardHeader>
+      <CardTitle>Destructive</CardTitle>
+      <CardDescription>Error or danger</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Errors or destructive actions.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="muted">
+    <CardHeader>
+      <CardTitle>Muted</CardTitle>
+      <CardDescription>Secondary info</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Less important information.</p>
+    </CardContent>
+  </Card>
+</div>
+```
+
+### Header con Layout Custom
+
+Override del grid para layouts específicos.
+
+```tsx
+{
+  /* Horizontal layout con custom spacing */
+}
+<Card className="w-[400px]">
+  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <CardTitle className="text-sm font-medium">Custom Layout</CardTitle>
+    <Badge>New</Badge>
+  </CardHeader>
+  <CardContent>
+    <div className="text-2xl font-bold">Content</div>
+  </CardContent>
+</Card>;
+```
+
+### Footer con Múltiples Acciones
+
+Diferentes arreglos de botones.
+
+```tsx
+{
+  /* Botones horizontales con gap */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Confirm Action</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Are you sure?</p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <Button size="sm">Confirm</Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* Botones apilados verticalmente */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Choose Option</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Select an action:</p>
+  </CardContent>
+  <CardFooter className="flex-col gap-2">
+    <Button className="w-full">Primary Action</Button>
+    <Button variant="outline" className="w-full">
+      Secondary
+    </Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* Acciones distribuidas */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Actions</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Multiple actions available.</p>
+  </CardContent>
+  <CardFooter className="justify-between">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <div className="flex gap-2">
+      <Button variant="outline" size="sm">
+        Save Draft
+      </Button>
+      <Button size="sm">Publish</Button>
+    </div>
+  </CardFooter>
+</Card>;
+```
+
+## Casos de Uso Comunes
+
+### Authentication Forms
+
+```tsx
+<Card className="w-full max-w-md">
+  <CardHeader>
+    <CardTitle>Create Account</CardTitle>
+    <CardDescription>Sign up to get started</CardDescription>
+  </CardHeader>
+  <CardContent className="space-y-4">
+    <Input type="text" placeholder="Full Name" />
+    <Input type="email" placeholder="Email" />
+    <Input type="password" placeholder="Password" />
+  </CardContent>
+  <CardFooter>
+    <Button className="w-full">Create Account</Button>
+  </CardFooter>
+</Card>
+```
+
+### Dashboard Widgets
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Recent Activity</CardTitle>
+    <CardDescription>Your latest actions</CardDescription>
+    <CardAction>
+      <Button variant="ghost" size="sm">
+        View All
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>{/* Activity list */}</CardContent>
+</Card>
+```
+
+### Settings Panels
+
+```tsx
+<Card className="border-b">
+  <CardHeader>
+    <CardTitle>Account Settings</CardTitle>
+    <CardDescription>Manage your account preferences</CardDescription>
+  </CardHeader>
+  <CardContent className="space-y-4">{/* Settings options */}</CardContent>
+  <CardFooter className="border-t">
+    <Button>Save Changes</Button>
+  </CardFooter>
+</Card>
+```
+
+### Pricing Cards
+
+```tsx
+<div className="grid gap-4 md:grid-cols-3">
+  <Card>
+    <CardHeader>
+      <CardTitle>Basic</CardTitle>
+      <CardDescription>For individuals</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div className="text-3xl font-bold">$9/mo</div>
+      <ul className="mt-4 space-y-2 text-sm">
+        <li>✓ Feature 1</li>
+        <li>✓ Feature 2</li>
+      </ul>
+    </CardContent>
+    <CardFooter>
+      <Button variant="outline" className="w-full">
+        Choose Plan
+      </Button>
+    </CardFooter>
+  </Card>
+  {/* More pricing tiers */}
+</div>
+```
+
+### Status/Alert Cards
+
+```tsx
+<Card variant="warning">
+  <CardHeader>
+    <CardTitle>Action Required</CardTitle>
+    <CardDescription>Your subscription expires soon</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Renew your subscription to continue accessing premium features.
+    </p>
+  </CardContent>
+  <CardFooter>
+    <Button>Renew Now</Button>
+  </CardFooter>
+</Card>
+```
+
+## Mejores Prácticas
+
+### Usa Anchos Fijos para Consistencia
+
+```tsx
+{
+  /* ✅ Correcto - Ancho consistente */
+}
+<Card className="w-[350px]">
+  <CardContent>Consistent width</CardContent>
+</Card>;
+
+{
+  /* ✅ También correcto - max-w para responsive */
+}
+<Card className="w-full max-w-md">
+  <CardContent>Responsive width</CardContent>
+</Card>;
+
+{
+  /* ❌ Evitar - Sin ancho puede expandirse inesperadamente */
+}
+<Card>
+  <CardContent>No width constraint</CardContent>
+</Card>;
+```
+
+### Variantes Semánticas
+
+```tsx
+{/* ✅ Correcto - Variante según significado */}
+<Card variant="success">
+  <CardContent>Payment processed!</CardContent>
+</Card>
+
+<Card variant="destructive">
+  <CardContent>Error occurred</CardContent>
+</Card>
+
+{/* ❌ Incorrecto - Variante no semántica */}
+<Card variant="success">
+  <CardContent>Error occurred</CardContent>  {/* Confuso */}
+</Card>
+```
+
+### Uso de Sombras y Bordes
+
+```tsx
+{/* ✅ Correcto - Default sin sombra para diseño plano */}
+<Card>
+  <CardContent>Clean, flat design</CardContent>
+</Card>
+
+{/* ✅ Correcto - Shadow para cards flotantes o destacadas */}
+<Card shadow="default">
+  <CardContent>Elevated card with depth</CardContent>
+</Card>
+
+{/* ✅ Correcto - Border transparent para integración con fondo */}
+<Card border="transparent" variant="muted">
+  <CardContent>Blends with background</CardContent>
+</Card>
+
+{/* ⚠️ Evitar - Shadow sin propósito específico */}
+<Card shadow="default">
+  <CardContent>Unnecessary elevation</CardContent>
+</Card>
+```
+
+**Recomendaciones**:
+
+- Usa `shadow="none"` (default) para layouts densos y diseños modernos
+- Aplica `shadow="default"` para destacar cards importantes o flotantes
+- Usa `border="transparent"` en cards sobre fondos de color similar
+- Mantén `border="default"` para máxima claridad y separación
+
+### Estructura de Header Completa
+
+```tsx
+{
+  /* ✅ Correcto - Título + Descripción */
+}
+<CardHeader>
+  <CardTitle>Title</CardTitle>
+  <CardDescription>Description</CardDescription>
+</CardHeader>;
+
+{
+  /* ⚠️ Aceptable - Solo título */
+}
+<CardHeader>
+  <CardTitle>Title Only</CardTitle>
+</CardHeader>;
+
+{
+  /* ❌ Evitar - Solo descripción sin título */
+}
+<CardHeader>
+  <CardDescription>No title</CardDescription>
+</CardHeader>;
+```
+
+### CardAction Solo en CardHeader
+
+```tsx
+{
+  /* ✅ Correcto - CardAction dentro de CardHeader */
+}
+<CardHeader>
+  <CardTitle>Title</CardTitle>
+  <CardDescription>Description</CardDescription>
+  <CardAction>
+    <Button size="sm">Action</Button>
+  </CardAction>
+</CardHeader>;
+
+{
+  /* ❌ Incorrecto - CardAction fuera de CardHeader */
+}
+<Card>
+  <CardTitle>Title</CardTitle>
+  <CardAction>
+    <Button>Won't position correctly</Button>
+  </CardAction>
+</Card>;
+```
+
+### Footer Flex para Múltiples Botones
+
+```tsx
+{
+  /* ✅ Correcto - Gap entre botones */
+}
+<CardFooter className="gap-2">
+  <Button variant="outline">Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>;
+
+{
+  /* ✅ Correcto - Full width individual */
+}
+<CardFooter className="flex-col gap-2">
+  <Button className="w-full">Primary</Button>
+  <Button variant="outline" className="w-full">
+    Secondary
+  </Button>
+</CardFooter>;
+
+{
+  /* ❌ Evitar - Sin gap entre botones */
+}
+<CardFooter>
+  <Button>Button1</Button>
+  <Button>Button2</Button> {/* Se pegan */}
+</CardFooter>;
+```
+
+### Bordes Opcionales
+
+```tsx
+{
+  /* ✅ Correcto - Border con padding automático */
+}
+<Card>
+  <CardHeader className="border-b">
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter className="border-t">
+    <Button>Action</Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* ❌ Evitar - Border sin la clase en header/footer */
+}
+<Card className="border-b">
+  {" "}
+  {/* No aplica padding correcto */}
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+</Card>;
+```
+
+### Grid en Stats Cards
+
+```tsx
+{
+  /* ✅ Correcto - Override spacing cuando es necesario */
+}
+<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+  <CardTitle className="text-sm font-medium">Stat</CardTitle>
+  <Icon className="h-4 w-4 text-muted-foreground" />
+</CardHeader>;
+
+{
+  /* ❌ Incorrecto - Usar grid default con layout horizontal */
+}
+<CardHeader className="flex-row">
+  {" "}
+  {/* Grid sigue activo */}
+  <CardTitle>Stat</CardTitle>
+  <Icon />
+</CardHeader>;
+```
+
+### Uso de Shadow
+
+```tsx
+{/* ✅ Correcto - Shadow para cards individuales o destacadas */}
+<Card shadow="default" className="w-[350px]">
+  <CardContent>
+    Stands out with subtle elevation
+  </CardContent>
+</Card>
+
+{/* ✅ Correcto - Sin shadow para grids densos */}
+<div className="grid gap-4 md:grid-cols-3">
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+</div>
+
+{/* ✅ Correcto - Sin shadow cuando ya hay separación visual */}
+<div className="space-y-4">
+  <Card shadow="none">
+    <CardContent>Spacing provides separation</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>No shadow needed here</CardContent>
+  </Card>
+</div>
+
+{/* ⚠️ Considerar - Mucha sombra en layouts densos */}
+<div className="grid gap-2 md:grid-cols-4">
+  <Card shadow="default">...</Card>  {/* Puede verse pesado */}
+  <Card shadow="default">...</Card>
+  <Card shadow="default">...</Card>
+  <Card shadow="default">...</Card>
+</div>
+```
+
+## Notas de Implementación
+
+- **Basado en CVA**: Usa `class-variance-authority` para variantes de color, sombra y borde
+- **Data Slots**: Cada componente tiene `data-slot` para CSS targeting específico (`data-slot="card"`, `data-slot="card-header"`, etc.)
+- **Grid Automático**: CardHeader usa `has-data-[slot=card-action]:grid-cols-[1fr_auto]` para detectar CardAction y ajustar layout
+- **Container Queries**: CardHeader tiene `@container/card-header` para responsive interno (requiere Tailwind CSS container queries)
+- **Spacing Consistente**: `gap-6` entre secciones (header, content, footer), `px-6` horizontal en todas las secciones
+- **Padding Condicional**: `.border-b` y `.border-t` triggers automáticos para `pb-6` y `pt-6` respectivamente
+- **Variantes de Color**: Cada variante ajusta `bg-*-50` y `text-*-foreground`, con ajustes para iconos SVG (`[&>svg]:text-current`)
+- **Variantes de Sombra**: Dos opciones (`default` con `shadow-xs`, `none` sin sombra por defecto) para control de elevación
+- **Variantes de Borde**: Dos opciones (`default` con borde visible, `transparent` con borde invisible pero mantiene espaciado)
+- **Rounded Corners**: `rounded-3xl` por defecto para esquinas suaves
+- **Flex Column**: Card root usa `flex flex-col gap-6` para layout vertical automático
+
+## Accesibilidad
+
+### Estructura Semántica
+
+Cards usan `<div>` por defecto, pero considera añadir roles ARIA cuando sea apropiado.
+
+```tsx
+{
+  /* Para cards interactivas */
+}
+<Card role="article" aria-labelledby="card-title">
+  <CardHeader>
+    <CardTitle id="card-title">Article Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+</Card>;
+
+{
+  /* Para cards clickeables */
+}
+<Card
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={(e) => e.key === "Enter" && handleClick()}
+>
+  <CardContent>Clickable card</CardContent>
+</Card>;
+```
+
+### Labels para CardAction
+
+```tsx
+{
+  /* ✅ Correcto - aria-label descriptiva */
+}
+<CardAction>
+  <Button variant="outline" size="sm" aria-label="More options">
+    <MoreHorizontalIcon />
+  </Button>
+</CardAction>;
+
+{
+  /* ❌ Incorrecto - Sin label para icono solo */
+}
+<CardAction>
+  <Button variant="outline" size="sm">
+    <MoreHorizontalIcon />
+  </Button>
+</CardAction>;
+```
+
+### Formularios Accesibles
+
+```tsx
+{
+  /* ✅ Correcto - Labels asociadas */
+}
+<CardContent>
+  <div className="space-y-4">
+    <div className="grid gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" />
+    </div>
+  </div>
+</CardContent>;
+```
+
+### Focus Management
+
+Cards no son focuseables por defecto. Si necesitas interactividad:
+
+```tsx
+{
+  /* Para cards clickeables */
+}
+<Card
+  tabIndex={0}
+  role="button"
+  className="cursor-pointer hover:shadow-md transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  onClick={handleClick}
+>
+  <CardContent>Interactive card</CardContent>
+</Card>;
+```
+
+## Troubleshooting
+
+### CardAction No Se Alinea a la Derecha
+
+**Problema**: CardAction no aparece en la posición correcta.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - CardAction fuera de CardHeader
+<Card>
+  <CardTitle>Title</CardTitle>
+  <CardAction>
+    <Button>Action</Button>
+  </CardAction>
+</Card>
+
+// ✅ Solución - CardAction dentro de CardHeader
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+    <CardAction>
+      <Button>Action</Button>
+    </CardAction>
+  </CardHeader>
+</Card>
+```
+
+### Gap Excesivo entre Secciones
+
+**Problema**: Mucho espacio entre header/content/footer.
+
+**Solución**:
+
+```tsx
+// ✅ El gap-6 es intencional, pero puedes reducirlo
+<Card className="gap-4">  {/* Override gap-6 */}
+  <CardHeader>...</CardHeader>
+  <CardContent>...</CardContent>
+</Card>
+
+// O eliminar gap completamente
+<Card className="gap-0">
+  <CardHeader>...</CardHeader>
+  <CardContent>...</CardContent>
+</Card>
+```
+
+### Bordes No Muestran Padding
+
+**Problema**: `.border-b` o `.border-t` no agregan padding.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - Border en elemento incorrecto
+<Card className="border-b">
+  <CardHeader>...</CardHeader>
+</Card>
+
+// ✅ Solución - Border en CardHeader o CardFooter
+<Card>
+  <CardHeader className="border-b">...</CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter className="border-t">...</CardFooter>
+</Card>
+```
+
+### Variante No Cambia Color
+
+**Problema**: Variante primary/success/etc no aplica colores.
+
+**Solución**:
+
+```tsx
+// ✅ Verifica que la prop sea en Card root
+<Card variant="primary">  {/* Correcto */}
+  <CardHeader>...</CardHeader>
+</Card>
+
+// ❌ No funciona en subcomponentes
+<Card>
+  <CardHeader variant="primary">  {/* No existe esta prop */}
+    ...
+  </CardHeader>
+</Card>
+```
+
+### Stats Cards con Layout Incorrecto
+
+**Problema**: Íconos y títulos no se alinean horizontalmente.
+
+**Solución**:
+
+```tsx
+// ✅ Override grid con flex
+<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+  <CardTitle className="text-sm font-medium">Revenue</CardTitle>
+  <DollarSignIcon className="h-4 w-4" />
+</CardHeader>
+```
+
+### Footer Buttons No Se Distribuyen
+
+**Problema**: Botones en footer se pegan sin espacio.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - Sin gap
+<CardFooter>
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+
+// ✅ Solución - Añade gap
+<CardFooter className="gap-2">
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+
+// ✅ O usa justify-between
+<CardFooter className="justify-between">
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+```
+
+## Referencias
+
+- **CVA (Class Variance Authority)**: https://cva.style/docs
+- **shadcn/ui Card**: https://ui.shadcn.com/docs/components/card
+- **Tailwind Container Queries**: https://tailwindcss.com/docs/hover-focus-and-other-states#container-queries
+- **ARIA Article Role**: https://www.w3.org/TR/wai-aria-1.2/#article