siesa-ui-kit 1.0.3 → 1.0.5

package/docs/spacing.md

@@ -0,0 +1,1684 @@
+# Sistema de Spacing - Siesa UI Kit
+
+## 📋 Tabla de Contenidos
+
+1. [Introducción](#introducción)
+2. [Escala de Spacing](#escala-de-spacing)
+3. [Guía de Uso](#guía-de-uso)
+4. [Ejemplos de Código](#ejemplos-de-código)
+5. [Mejores Prácticas](#mejores-prácticas)
+6. [Dark Mode](#dark-mode)
+7. [Referencia Rápida](#referencia-rápida)
+
+---
+
+## Introducción
+
+El sistema de spacing de Siesa UI Kit proporciona una escala consistente para controlar márgenes (margin), padding, gaps entre elementos, y posicionamiento. Este sistema está basado en Tailwind CSS con algunas extensiones personalizadas para casos de uso específicos.
+
+### Objetivos del Sistema
+
+- **Consistencia Visual**: Usar múltiplos de 4px para crear una cuadrícula visual coherente
+- **Escalabilidad**: Escala logarítmica que permite desde espacios pequeños (2px) hasta grandes (384px)
+- **Facilidad de Uso**: Nombres memorables y predecibles
+- **Responsive Design**: Fácil de combinar con breakpoints para diseños adaptables
+
+### Principios de Diseño
+
+1. **Sistema Base-4**: La mayoría de los valores son múltiplos de 4px (excepto px, 0.5, 1.5, 2.5, 3.5)
+2. **Progresión Lógica**: Los valores crecen de manera predecible
+3. **Valores Intermedios**: Escalas .5 (2px, 6px, 10px, 14px) para ajustes finos
+4. **Responsive First**: Diseñado para funcionar con modificadores responsive (sm:, md:, lg:)
+
+---
+
+## Escala de Spacing
+
+El sistema de spacing usa una convención numérica donde cada unidad representa un incremento basado en `rem` (donde 1rem = 16px por defecto).
+
+### Tabla Completa de Spacing
+
+| Clase Tailwind | REM | Pixels | Uso Principal |
+|----------------|-----|--------|---------------|
+| `0` | 0px | 0px | Sin espaciado |
+| `px` | 1px | 1px | Bordes finos, líneas divisorias |
+| `0.5` | 0.125rem | 2px | Espaciado mínimo |
+| `1` | 0.25rem | 4px | Espaciado muy pequeño |
+| `1.5` | 0.375rem | 6px | **Espaciado compacto** |
+| `2` | 0.5rem | 8px | Espaciado pequeño |
+| `2.5` | 0.625rem | 10px | Espaciado entre pequeño y medio |
+| `3` | 0.75rem | 12px | **Padding interno de componentes** |
+| `3.5` | 0.875rem | 14px | Espaciado medio-compacto |
+| `4` | 1rem | 16px | **Espaciado base estándar** |
+| `5` | 1.25rem | 20px | Espaciado medio |
+| `6` | 1.5rem | 24px | **Padding de cards, modales** |
+| `7` | 1.75rem | 28px | Espaciado medio-grande |
+| `8` | 2rem | 32px | **Gaps entre secciones** |
+| `9` | 2.25rem | 36px | Espaciado grande |
+| `10` | 2.5rem | 40px | Espaciado grande |
+| `11` | 2.75rem | 44px | Espaciado muy grande |
+| `12` | 3rem | 48px | **Separación entre secciones** |
+| `14` | 3.5rem | 56px | Espaciado extra grande |
+| `16` | 4rem | 64px | **Padding de containers** |
+| `20` | 5rem | 80px | Espaciado muy amplio |
+| `24` | 6rem | 96px | Espaciado masivo |
+| `28` | 7rem | 112px | Espaciado extra masivo |
+| `32` | 8rem | 128px | **Separación entre secciones principales** |
+| `36` | 9rem | 144px | Espaciado muy amplio |
+| `40` | 10rem | 160px | Márgenes grandes de página |
+| `44` | 11rem | 176px | Márgenes muy grandes |
+| `48` | 12rem | 192px | Espaciado hero |
+| `52` | 13rem | 208px | Espaciado hero grande |
+| `56` | 14rem | 224px | Espaciado hero muy grande |
+| `60` | 15rem | 240px | Espaciado extremo |
+| `64` | 16rem | 256px | Márgenes de página completos |
+| `72` | 18rem | 288px | Espaciado máximo |
+| `80` | 20rem | 320px | Espaciado extra máximo |
+| `96` | 24rem | 384px | Espaciado ultra máximo |
+
+### Valores Más Comunes
+
+Los siguientes valores se usan en el 90% de los casos:
+
+- **`3` (12px)**: Padding interno de botones, inputs, labels
+- **`4` (16px)**: Espaciado estándar entre elementos
+- **`6` (24px)**: Padding de cards, paneles, modales
+- **`8` (32px)**: Gaps entre secciones relacionadas
+- **`12` (48px)**: Separación entre secciones distintas
+- **`16` (64px)**: Padding horizontal de containers principales
+
+### Valores Personalizados
+
+El sistema de Siesa UI Kit incluye dos valores personalizados que no son estándar en Tailwind:
+
+```javascript
+// tailwind.config.js
+spacing: {
+  '1.5': '6px',   // Entre 1 (4px) y 2 (8px)
+  '2.5': '10px',  // Entre 2 (8px) y 3 (12px)
+}
+```
+
+Estos valores son útiles para ajustes finos en componentes específicos.
+
+---
+
+## Guía de Uso
+
+### Por Tipo de Espaciado
+
+#### 1. Padding (p-, px-, py-, pt-, pr-, pb-, pl-)
+
+Controla el espacio interior de un elemento.
+
+```tsx
+// Padding uniforme en todos los lados
+<div className="p-6">Card content</div>
+
+// Padding horizontal (izquierda y derecha)
+<div className="px-4">Horizontal padding</div>
+
+// Padding vertical (arriba y abajo)
+<div className="py-2">Vertical padding</div>
+
+// Padding individual por lado
+<div className="pt-8 pr-6 pb-8 pl-6">Custom padding each side</div>
+```
+
+**Casos de Uso Comunes:**
+- Botones: `px-4 py-2` o `px-6 py-3`
+- Cards: `p-6` o `p-8`
+- Inputs: `px-3 py-2`
+- Containers: `px-6` o `px-16`
+
+#### 2. Margin (m-, mx-, my-, mt-, mr-, mb-, ml-)
+
+Controla el espacio exterior entre elementos.
+
+```tsx
+// Margin bottom para separar elementos verticalmente
+<div className="mb-4">First element</div>
+
+// Margin top
+<div className="mt-8">Second element</div>
+
+// Margin horizontal (auto para centrar)
+<div className="mx-auto">Centered content</div>
+
+// Margin negativo para overlays
+<div className="mt-[-2rem]">Overlapping element</div>
+```
+
+**Casos de Uso Comunes:**
+- Separar párrafos: `mb-4`
+- Separar secciones: `mb-12` o `mb-16`
+- Centrar elementos: `mx-auto`
+- Espaciar elementos en listas: `mb-2` o `mb-3`
+
+#### 3. Gap (gap-, gap-x-, gap-y-)
+
+Controla el espacio entre elementos en flex y grid.
+
+```tsx
+// Gap uniforme en flex/grid
+<div className="flex gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+
+// Gap horizontal (entre columnas)
+<div className="grid grid-cols-3 gap-x-6">
+  {/* items */}
+</div>
+
+// Gap vertical (entre filas)
+<div className="grid gap-y-4">
+  {/* items */}
+</div>
+
+// Gap diferente para horizontal y vertical
+<div className="grid gap-x-6 gap-y-4">
+  {/* items */}
+</div>
+```
+
+**Casos de Uso Comunes:**
+- Botones en grupo: `gap-2` o `gap-3`
+- Cards en grid: `gap-6`
+- Formularios: `gap-4`
+- Navegación: `gap-6` o `gap-8`
+
+#### 4. Space Between (space-x-, space-y-)
+
+Añade espacio entre elementos hijos (alternativa a gap).
+
+```tsx
+// Espacio horizontal entre hijos
+<div className="flex space-x-4">
+  <button>Button 1</button>
+  <button>Button 2</button>
+  <button>Button 3</button>
+</div>
+
+// Espacio vertical entre hijos
+<div className="space-y-6">
+  <article>Article 1</article>
+  <article>Article 2</article>
+</div>
+```
+
+**Diferencia entre `gap` y `space-x/y`:**
+- `gap`: Aplica espacio en contenedores flex/grid (más moderno)
+- `space-x/y`: Aplica margin a los hijos (compatible con más navegadores antiguos)
+
+#### 5. Inset (top-, right-, bottom-, left-)
+
+Controla el posicionamiento absoluto/relativo.
+
+```tsx
+// Posicionar elemento en la esquina superior derecha
+<div className="absolute top-4 right-4">
+  Notification badge
+</div>
+
+// Posicionar overlay completo
+<div className="absolute inset-0">
+  Full overlay
+</div>
+
+// Posicionar desde el centro
+<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+  Centered absolutely
+</div>
+```
+
+### Por Caso de Uso
+
+#### 1. Botones
+
+```tsx
+// Botón pequeño (Small)
+<button className="px-3 py-1.5 text-sm">
+  Small Button
+</button>
+
+// Botón mediano (Medium - Default)
+<button className="px-4 py-2 text-sm">
+  Medium Button
+</button>
+
+// Botón grande (Large)
+<button className="px-6 py-3 text-base">
+  Large Button
+</button>
+
+// Grupo de botones
+<div className="flex gap-3">
+  <button className="px-4 py-2">Cancel</button>
+  <button className="px-4 py-2">Confirm</button>
+</div>
+```
+
+#### 2. Cards y Paneles
+
+```tsx
+// Card compacta
+<div className="p-4 rounded-2xl border border-border-primary">
+  <h3 className="mb-2 font-bold">Card Title</h3>
+  <p>Card content</p>
+</div>
+
+// Card estándar
+<div className="p-6 rounded-2xl border border-border-primary">
+  <h3 className="mb-4 font-bold text-lg">Card Title</h3>
+  <p className="mb-4">Card content</p>
+  <button className="px-4 py-2">Action</button>
+</div>
+
+// Card espaciosa
+<div className="p-8 rounded-2xl border border-border-primary">
+  <h2 className="mb-6 font-bold text-2xl">Card Title</h2>
+  <p className="mb-6">Card content with more breathing room</p>
+  <div className="flex gap-3">
+    <button>Cancel</button>
+    <button>Confirm</button>
+  </div>
+</div>
+```
+
+#### 3. Formularios
+
+```tsx
+// Formulario con spacing consistente
+<form className="space-y-6">
+  {/* Campo de input */}
+  <div className="space-y-2">
+    <label className="block font-bold text-sm">Email</label>
+    <input
+      type="email"
+      className="w-full px-3 py-2 border border-border-primary rounded-md"
+    />
+    <p className="text-xs text-content-secondary">
+      We'll never share your email.
+    </p>
+  </div>
+
+  {/* Campo de input */}
+  <div className="space-y-2">
+    <label className="block font-bold text-sm">Password</label>
+    <input
+      type="password"
+      className="w-full px-3 py-2 border border-border-primary rounded-md"
+    />
+  </div>
+
+  {/* Botones */}
+  <div className="flex gap-3 pt-4">
+    <button type="button" className="px-4 py-2">Cancel</button>
+    <button type="submit" className="px-4 py-2">Submit</button>
+  </div>
+</form>
+```
+
+#### 4. Grid de Cards
+
+```tsx
+// Grid responsive con spacing
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+  <div className="p-6 border rounded-2xl">Card 1</div>
+  <div className="p-6 border rounded-2xl">Card 2</div>
+  <div className="p-6 border rounded-2xl">Card 3</div>
+  <div className="p-6 border rounded-2xl">Card 4</div>
+  <div className="p-6 border rounded-2xl">Card 5</div>
+  <div className="p-6 border rounded-2xl">Card 6</div>
+</div>
+```
+
+#### 5. Navegación
+
+```tsx
+// Navbar con spacing
+<nav className="px-6 py-4 border-b border-border-primary">
+  <div className="container mx-auto flex items-center justify-between">
+    <div className="font-bold text-xl">Logo</div>
+    <ul className="flex gap-6">
+      <li><a href="#home">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+    <button className="px-4 py-2">Sign In</button>
+  </div>
+</nav>
+```
+
+#### 6. Layouts de Página
+
+```tsx
+// Layout con márgenes consistentes
+<div className="min-h-screen">
+  {/* Header */}
+  <header className="px-6 py-4">
+    <div className="container mx-auto">Header content</div>
+  </header>
+
+  {/* Main content */}
+  <main className="px-6 py-12">
+    <div className="container mx-auto">
+      {/* Hero section */}
+      <section className="mb-16">
+        <h1 className="mb-6 font-bold text-6xl">Hero Title</h1>
+        <p className="mb-8 text-lg">Hero description</p>
+        <button className="px-6 py-3">Get Started</button>
+      </section>
+
+      {/* Features section */}
+      <section className="mb-16">
+        <h2 className="mb-8 font-bold text-4xl">Features</h2>
+        <div className="grid grid-cols-3 gap-6">
+          {/* Feature cards */}
+        </div>
+      </section>
+    </div>
+  </main>
+
+  {/* Footer */}
+  <footer className="px-6 py-12 bg-background-secondary">
+    <div className="container mx-auto">Footer content</div>
+  </footer>
+</div>
+```
+
+---
+
+## Ejemplos de Código
+
+### Ejemplo 1: Sistema de Cards Completo
+
+```tsx
+export const CardSystem = () => {
+  return (
+    <div className="p-8 space-y-8">
+      {/* Compact Card - Para información densa */}
+      <div className="p-4 border border-border-primary rounded-2xl">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-8 h-8 rounded-full bg-primary-custom-600" />
+          <h3 className="font-bold text-sm">Compact Card</h3>
+        </div>
+        <p className="text-xs text-content-secondary">
+          Minimal spacing for dense information display.
+        </p>
+      </div>
+
+      {/* Standard Card - Uso general */}
+      <div className="p-6 border border-border-primary rounded-2xl shadow-base">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="w-12 h-12 rounded-full bg-primary-custom-600" />
+          <h3 className="font-bold text-base">Standard Card</h3>
+        </div>
+        <p className="mb-4 text-sm text-content-secondary">
+          Balanced spacing for most use cases. This is the most common card style.
+        </p>
+        <div className="flex gap-3">
+          <button className="px-4 py-2 border border-border-primary rounded-md text-sm font-bold">
+            Cancel
+          </button>
+          <button className="px-4 py-2 bg-primary-custom-600 text-white rounded-md text-sm font-bold">
+            Confirm
+          </button>
+        </div>
+      </div>
+
+      {/* Spacious Card - Para contenido importante */}
+      <div className="p-8 border border-border-primary rounded-2xl shadow-lg">
+        <div className="flex items-center gap-6 mb-6">
+          <div className="w-16 h-16 rounded-full bg-primary-custom-600" />
+          <h2 className="font-bold text-xl">Spacious Card</h2>
+        </div>
+        <p className="mb-6 text-base text-content-secondary">
+          Generous spacing for important content that needs breathing room.
+          Perfect for hero cards or feature highlights.
+        </p>
+        <div className="flex gap-4">
+          <button className="px-6 py-3 border border-border-primary rounded-md font-bold">
+            Learn More
+          </button>
+          <button className="px-6 py-3 bg-primary-custom-600 text-white rounded-md font-bold">
+            Get Started
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+### Ejemplo 2: Formulario con Spacing Consistente
+
+```tsx
+export const ConsistentForm = () => {
+  return (
+    <div className="max-w-md mx-auto p-8">
+      <form className="space-y-6">
+        {/* Form header */}
+        <div className="space-y-2">
+          <h2 className="font-bold text-2xl">Create Account</h2>
+          <p className="text-sm text-content-secondary">
+            Fill in your details to get started.
+          </p>
+        </div>
+
+        {/* Name field */}
+        <div className="space-y-2">
+          <label htmlFor="name" className="block font-bold text-sm">
+            Full Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            className="w-full px-3 py-2 border border-border-primary rounded-md text-sm"
+            placeholder="John Doe"
+          />
+        </div>
+
+        {/* Email field */}
+        <div className="space-y-2">
+          <label htmlFor="email" className="block font-bold text-sm">
+            Email Address
+          </label>
+          <input
+            id="email"
+            type="email"
+            className="w-full px-3 py-2 border border-border-primary rounded-md text-sm"
+            placeholder="john@example.com"
+          />
+          <p className="text-xs text-content-secondary">
+            We'll send a verification email to this address.
+          </p>
+        </div>
+
+        {/* Password field */}
+        <div className="space-y-2">
+          <label htmlFor="password" className="block font-bold text-sm">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            className="w-full px-3 py-2 border border-border-primary rounded-md text-sm"
+            placeholder="••••••••"
+          />
+          <p className="text-xs text-content-secondary">
+            Must be at least 8 characters long.
+          </p>
+        </div>
+
+        {/* Checkbox */}
+        <div className="flex items-start gap-3">
+          <input
+            id="terms"
+            type="checkbox"
+            className="mt-1 w-4 h-4"
+          />
+          <label htmlFor="terms" className="text-sm text-content-secondary">
+            I agree to the{' '}
+            <a href="#" className="text-primary-custom-600 font-bold">
+              Terms of Service
+            </a>{' '}
+            and{' '}
+            <a href="#" className="text-primary-custom-600 font-bold">
+              Privacy Policy
+            </a>
+          </label>
+        </div>
+
+        {/* Submit button */}
+        <button
+          type="submit"
+          className="w-full px-4 py-3 bg-primary-custom-600 text-white rounded-md font-bold text-sm"
+        >
+          Create Account
+        </button>
+
+        {/* Divider */}
+        <div className="relative py-4">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-border-primary" />
+          </div>
+          <div className="relative flex justify-center">
+            <span className="px-4 bg-white text-xs text-content-secondary">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        {/* Social buttons */}
+        <div className="grid grid-cols-2 gap-3">
+          <button className="px-4 py-2 border border-border-primary rounded-md text-sm font-bold">
+            Google
+          </button>
+          <button className="px-4 py-2 border border-border-primary rounded-md text-sm font-bold">
+            GitHub
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+```
+
+### Ejemplo 3: Dashboard Layout con Spacing
+
+```tsx
+export const DashboardLayout = () => {
+  return (
+    <div className="min-h-screen bg-background-secondary">
+      {/* Header */}
+      <header className="bg-white border-b border-border-primary px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <div className="font-bold text-xl">Dashboard</div>
+            <nav className="flex gap-6">
+              <a href="#" className="text-sm font-bold">Overview</a>
+              <a href="#" className="text-sm">Analytics</a>
+              <a href="#" className="text-sm">Reports</a>
+            </nav>
+          </div>
+          <button className="px-4 py-2 bg-primary-custom-600 text-white rounded-md text-sm font-bold">
+            New Project
+          </button>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="p-6">
+        <div className="max-w-7xl mx-auto">
+          {/* Page title */}
+          <div className="mb-8">
+            <h1 className="mb-2 font-bold text-4xl">Welcome back, John</h1>
+            <p className="text-content-secondary">
+              Here's what's happening with your projects today.
+            </p>
+          </div>
+
+          {/* Stats grid */}
+          <div className="grid grid-cols-4 gap-6 mb-8">
+            {[
+              { label: 'Total Projects', value: '24' },
+              { label: 'Active Tasks', value: '156' },
+              { label: 'Team Members', value: '12' },
+              { label: 'Completion', value: '87%' },
+            ].map((stat) => (
+              <div key={stat.label} className="p-6 bg-white rounded-2xl border border-border-primary">
+                <p className="mb-2 text-xs text-content-secondary">
+                  {stat.label}
+                </p>
+                <p className="font-bold text-3xl">{stat.value}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Content sections */}
+          <div className="grid grid-cols-3 gap-6">
+            {/* Recent activity */}
+            <div className="col-span-2 p-6 bg-white rounded-2xl border border-border-primary">
+              <h2 className="mb-6 font-bold text-xl">Recent Activity</h2>
+              <div className="space-y-4">
+                {[1, 2, 3, 4].map((item) => (
+                  <div key={item} className="flex items-start gap-4 pb-4 border-b border-border-primary last:border-0">
+                    <div className="w-10 h-10 rounded-full bg-primary-custom-100" />
+                    <div className="flex-1">
+                      <p className="mb-1 font-bold text-sm">Activity title</p>
+                      <p className="text-xs text-content-secondary">
+                        Activity description goes here
+                      </p>
+                    </div>
+                    <span className="text-xs text-content-secondary">2h ago</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Sidebar */}
+            <div className="space-y-6">
+              {/* Team card */}
+              <div className="p-6 bg-white rounded-2xl border border-border-primary">
+                <h3 className="mb-4 font-bold">Team Members</h3>
+                <div className="space-y-3">
+                  {[1, 2, 3].map((member) => (
+                    <div key={member} className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-primary-custom-600" />
+                      <div className="flex-1">
+                        <p className="font-bold text-sm">Team Member</p>
+                        <p className="text-xs text-content-secondary">Role</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <button className="mt-4 w-full px-4 py-2 border border-border-primary rounded-md text-sm font-bold">
+                  View All
+                </button>
+              </div>
+
+              {/* Quick actions */}
+              <div className="p-6 bg-white rounded-2xl border border-border-primary">
+                <h3 className="mb-4 font-bold">Quick Actions</h3>
+                <div className="space-y-2">
+                  <button className="w-full px-4 py-2 text-left border border-border-primary rounded-md text-sm">
+                    Create Project
+                  </button>
+                  <button className="w-full px-4 py-2 text-left border border-border-primary rounded-md text-sm">
+                    Add Task
+                  </button>
+                  <button className="w-full px-4 py-2 text-left border border-border-primary rounded-md text-sm">
+                    Invite Member
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+```
+
+### Ejemplo 4: Modal con Spacing Correcto
+
+```tsx
+export const SpacedModal = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-lg"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative z-10 w-full max-w-md bg-white rounded-3xl shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border-primary">
+          <h2 className="font-bold text-2xl">Modal Title</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-background-secondary rounded-full"
+          >
+            <XIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-6">
+          <p className="mb-4 text-content-secondary">
+            This is the modal body. Notice the consistent spacing throughout
+            the modal for a polished look.
+          </p>
+
+          {/* Form inside modal */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="block font-bold text-sm">Name</label>
+              <input
+                type="text"
+                className="w-full px-3 py-2 border border-border-primary rounded-md"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="block font-bold text-sm">Email</label>
+              <input
+                type="email"
+                className="w-full px-3 py-2 border border-border-primary rounded-md"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex gap-3 justify-end p-6 border-t border-border-primary">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 border border-border-primary rounded-md font-bold"
+          >
+            Cancel
+          </button>
+          <button className="px-4 py-2 bg-primary-custom-600 text-white rounded-md font-bold">
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+### Ejemplo 5: List con Spacing Consistente
+
+```tsx
+export const SpacedList = () => {
+  const items = [
+    { id: 1, title: 'First item', description: 'Description for first item' },
+    { id: 2, title: 'Second item', description: 'Description for second item' },
+    { id: 3, title: 'Third item', description: 'Description for third item' },
+  ];
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      {/* List header */}
+      <div className="mb-6">
+        <h2 className="mb-2 font-bold text-2xl">Task List</h2>
+        <p className="text-sm text-content-secondary">
+          Manage your daily tasks and priorities.
+        </p>
+      </div>
+
+      {/* List */}
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="p-4 border border-border-primary rounded-xl hover:border-primary-custom-300 transition-colors"
+          >
+            <div className="flex items-start gap-4">
+              {/* Checkbox */}
+              <input
+                type="checkbox"
+                className="mt-1 w-5 h-5"
+              />
+
+              {/* Content */}
+              <div className="flex-1">
+                <h3 className="mb-1 font-bold">{item.title}</h3>
+                <p className="text-sm text-content-secondary">
+                  {item.description}
+                </p>
+              </div>
+
+              {/* Actions */}
+              <div className="flex gap-2">
+                <button className="p-2 hover:bg-background-secondary rounded-md">
+                  <EditIcon className="w-4 h-4" />
+                </button>
+                <button className="p-2 hover:bg-background-secondary rounded-md">
+                  <TrashIcon className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Add button */}
+      <button className="mt-6 w-full px-4 py-3 border border-dashed border-border-primary rounded-xl font-bold hover:border-primary-custom-300 hover:bg-primary-custom-100/50 transition-colors">
+        + Add New Task
+      </button>
+    </div>
+  );
+};
+```
+
+---
+
+## Mejores Prácticas
+
+### ✅ Hacer
+
+1. **Usar valores consistentes del sistema**
+   ```tsx
+   // ✅ CORRECTO - Usar valores del sistema
+   <div className="p-6 mb-8">Content</div>
+   ```
+
+2. **Mantener jerarquía visual con spacing**
+   ```tsx
+   // ✅ CORRECTO - Spacing más pequeño para elementos relacionados
+   <div className="space-y-2">
+     <label>Label</label>
+     <input />
+     <p className="text-xs">Helper text</p>
+   </div>
+
+   // Spacing más grande entre grupos diferentes
+   <form className="space-y-6">
+     <div className="space-y-2">{/* Group 1 */}</div>
+     <div className="space-y-2">{/* Group 2 */}</div>
+   </form>
+   ```
+
+3. **Usar `gap` en lugar de margin cuando sea posible**
+   ```tsx
+   // ✅ CORRECTO - gap es más limpio y predecible
+   <div className="flex gap-4">
+     <button>Button 1</button>
+     <button>Button 2</button>
+   </div>
+   ```
+
+4. **Usar spacing responsive**
+   ```tsx
+   // ✅ CORRECTO - Ajustar spacing para diferentes tamaños
+   <div className="p-4 md:p-6 lg:p-8">
+     Responsive padding
+   </div>
+   ```
+
+5. **Agrupar elementos relacionados**
+   ```tsx
+   // ✅ CORRECTO - Spacing menor dentro de grupos
+   <div className="space-y-8">
+     <div className="space-y-2">
+       <h2>Section 1</h2>
+       <p>Content related to section 1</p>
+     </div>
+
+     <div className="space-y-2">
+       <h2>Section 2</h2>
+       <p>Content related to section 2</p>
+     </div>
+   </div>
+   ```
+
+### ❌ Evitar
+
+1. **No usar valores arbitrarios sin necesidad**
+   ```tsx
+   // ❌ INCORRECTO - Valor arbitrario
+   <div className="p-[13px]">Content</div>
+
+   // ✅ CORRECTO - Usar valor del sistema
+   <div className="p-3">Content</div>
+   ```
+
+2. **No mezclar unidades de spacing inconsistentes**
+   ```tsx
+   // ❌ INCORRECTO - Valores aleatorios
+   <div className="space-y-5">
+     <div className="mb-7">Item 1</div>
+     <div className="mb-11">Item 2</div>
+   </div>
+
+   // ✅ CORRECTO - Valores consistentes
+   <div className="space-y-6">
+     <div>Item 1</div>
+     <div>Item 2</div>
+   </div>
+   ```
+
+3. **No usar demasiado spacing pequeño**
+   ```tsx
+   // ❌ INCORRECTO - Muy compacto, difícil de clickear
+   <button className="px-1 py-0.5">Button</button>
+
+   // ✅ CORRECTO - Área de click adecuada
+   <button className="px-4 py-2">Button</button>
+   ```
+
+4. **No apilar márgenes innecesarios**
+   ```tsx
+   // ❌ INCORRECTO - Margen doble
+   <div className="mb-4">
+     <p className="mb-4">Text</p>
+   </div>
+
+   // ✅ CORRECTO - Usar space-y o gap
+   <div className="space-y-4">
+     <p>Text 1</p>
+     <p>Text 2</p>
+   </div>
+   ```
+
+5. **No ignorar el padding en elementos clickeables**
+   ```tsx
+   // ❌ INCORRECTO - Área de click pequeña
+   <button className="p-0">Click me</button>
+
+   // ✅ CORRECTO - Área de click generosa
+   <button className="px-4 py-2">Click me</button>
+   ```
+
+### Reglas de Consistencia
+
+1. **Elementos similares deben tener spacing similar**
+   - Todos los botones primarios: `px-4 py-2`
+   - Todas las cards estándar: `p-6`
+   - Todos los inputs: `px-3 py-2`
+
+2. **Escalar spacing proporcionalmente**
+   - Botón small: `px-3 py-1.5`
+   - Botón medium: `px-4 py-2`
+   - Botón large: `px-6 py-3`
+
+3. **Mantener ritmo vertical**
+   - Usar `space-y-*` para mantener spacing vertical consistente
+   - Duplicar el spacing entre secciones principales
+
+4. **Responsive scaling**
+   - Mobile: Padding más pequeño (p-4)
+   - Tablet: Padding medio (md:p-6)
+   - Desktop: Padding grande (lg:p-8)
+
+---
+
+## Dark Mode
+
+Los valores de spacing permanecen idénticos entre light y dark mode, pero es importante combinarlos con colores adaptativos para mantener la coherencia visual en ambos modos.
+
+### Configuración de Tailwind CSS
+
+El modo oscuro en Siesa UI Kit se basa en la estrategia de clases de Tailwind CSS:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: 'class', // ✅ Estrategia basada en clases (NO 'media')
+  // ...resto de la configuración
+}
+```
+
+Con esta configuración, el modo oscuro se activa añadiendo la clase `.dark` al elemento `<html>`:
+
+```html
+<!-- Modo claro -->
+<html>
+  <body>
+    <!-- Contenido en modo claro -->
+  </body>
+</html>
+
+<!-- Modo oscuro -->
+<html class="dark">
+  <body>
+    <!-- Contenido en modo oscuro -->
+  </body>
+</html>
+```
+
+### El Modificador `dark:`
+
+El modificador `dark:` de Tailwind funciona como un **prefijo condicional** que aplica estilos solo cuando la clase `.dark` está presente en un elemento padre (típicamente `<html>`).
+
+#### Sintaxis Básica para Spacing
+
+```tsx
+// Patrón básico - Mismo spacing, colores adaptativos
+<div className="p-6 bg-white dark:bg-dark-bg-primary rounded-2xl">
+  Card con padding consistente
+</div>
+
+// Los valores de spacing (p-6, mb-4, gap-3, etc.) NO cambian
+// Solo los colores se adaptan al modo oscuro
+```
+
+### Principios de Spacing en Dark Mode
+
+**Regla de Oro**: El sistema de spacing no cambia, pero el contexto visual sí:
+
+```tsx
+// ✅ CORRECTO - Mismo spacing, colores adaptativos
+<div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl">
+  <h3 className="mb-4 text-content-primary dark:text-dark-content-primary font-bold">
+    Title
+  </h3>
+  <p className="text-content-secondary dark:text-content-secondary">
+    Content
+  </p>
+</div>
+
+// ❌ INCORRECTO - Cambiar spacing en dark mode
+<div className="p-6 dark:p-8">
+  NO hacer esto - mantener spacing consistente
+</div>
+```
+
+### Combinando Spacing con Estados Interactivos
+
+El modificador `dark:` se puede combinar con hover y otros estados, manteniendo el spacing consistente:
+
+```tsx
+// Dark mode + Hover (spacing no cambia, solo colores)
+<button className="
+  px-4 py-2
+  bg-primary-custom-600 dark:bg-dark-bg-inverse
+  hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90
+  text-white dark:text-dark-content-inverse
+">
+  Button con spacing consistente
+</button>
+
+// Dark mode + Focus en inputs
+<input className="
+  px-3 py-2
+  border border-border-primary dark:border-dark-border-primary
+  focus:ring-2 focus:ring-primary-custom-400/20 dark:focus:ring-dark-border-custom/20
+" />
+```
+
+### Orden de Modificadores
+
+Tailwind CSS recomienda un orden específico:
+
+**Formato**: `{responsive}:{dark}:{state}:{utility}`
+
+```tsx
+// ✅ CORRECTO - Orden: responsive → dark → state → utility
+<div className="
+  p-4
+  md:p-6
+  bg-white
+  md:dark:bg-dark-bg-primary
+  md:dark:hover:bg-dark-bg-secondary
+">
+  Card con orden correcto
+</div>
+
+// ❌ INCORRECTO - Orden equivocado
+<div className="
+  dark:md:hover:bg-dark-bg-secondary
+  p-4
+">
+  Orden confuso
+</div>
+```
+
+### Ejemplos de Spacing con Dark Mode
+
+#### 1. Cards con Spacing Adaptado
+
+```tsx
+// Card con padding y spacing interno consistente
+<div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl shadow-base">
+  {/* Header con margin-bottom */}
+  <div className="mb-4 flex items-center justify-between">
+    <h2 className="text-content-primary dark:text-dark-content-primary font-bold text-xl">
+      Card Title
+    </h2>
+    <span className="text-content-secondary dark:text-content-secondary text-sm">
+      Just now
+    </span>
+  </div>
+
+  {/* Content con margin-bottom */}
+  <p className="mb-4 text-content-secondary dark:text-content-secondary">
+    Esta card mantiene el mismo spacing (p-6, mb-4) en ambos modos,
+    pero los colores se adaptan automáticamente.
+  </p>
+
+  {/* Actions con gap */}
+  <div className="flex gap-3">
+    <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold">
+      Primary
+    </button>
+    <button className="px-4 py-2 border border-border-primary dark:border-dark-border-custom text-content-primary dark:text-dark-content-primary rounded-md font-bold">
+      Secondary
+    </button>
+  </div>
+</div>
+```
+
+#### 2. Form con Spacing Vertical
+
+```tsx
+// Formulario con spacing consistente en ambos modos
+<form className="max-w-md mx-auto p-8 bg-white dark:bg-dark-bg-primary rounded-2xl border border-border-primary dark:border-dark-border-primary">
+  {/* Form header - spacing con mb-6 */}
+  <div className="mb-6">
+    <h2 className="mb-2 text-content-primary dark:text-dark-content-primary font-bold text-2xl">
+      Sign Up
+    </h2>
+    <p className="text-content-secondary dark:text-content-secondary text-sm">
+      Create your account to get started
+    </p>
+  </div>
+
+  {/* Form fields - spacing con space-y-6 */}
+  <div className="space-y-6">
+    {/* Field 1 */}
+    <div className="space-y-2">
+      <label className="block text-content-primary dark:text-dark-content-primary font-bold text-sm">
+        Email
+      </label>
+      <input
+        type="email"
+        className="w-full px-3 py-2 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary text-content-primary dark:text-dark-content-primary rounded-md"
+        placeholder="you@example.com"
+      />
+      <p className="text-content-tertiary dark:text-content-tertiary text-xs">
+        We'll never share your email
+      </p>
+    </div>
+
+    {/* Field 2 */}
+    <div className="space-y-2">
+      <label className="block text-content-primary dark:text-dark-content-primary font-bold text-sm">
+        Password
+      </label>
+      <input
+        type="password"
+        className="w-full px-3 py-2 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary text-content-primary dark:text-dark-content-primary rounded-md"
+        placeholder="••••••••"
+      />
+    </div>
+
+    {/* Submit button - spacing con pt-4 */}
+    <button
+      type="submit"
+      className="w-full px-4 py-3 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold"
+    >
+      Create Account
+    </button>
+  </div>
+</form>
+```
+
+#### 3. Grid de Cards con Gaps
+
+```tsx
+// Grid con gaps consistentes y colores adaptativos
+<div className="p-8 bg-background-secondary dark:bg-dark-bg-primary min-h-screen">
+  <div className="max-w-7xl mx-auto">
+    {/* Header con mb-8 */}
+    <div className="mb-8">
+      <h1 className="mb-2 text-content-primary dark:text-dark-content-primary font-bold text-4xl">
+        Dashboard
+      </h1>
+      <p className="text-content-secondary dark:text-content-secondary">
+        Overview of your projects
+      </p>
+    </div>
+
+    {/* Grid con gap-6 */}
+    <div className="grid grid-cols-3 gap-6">
+      {[1, 2, 3, 4, 5, 6].map((item) => (
+        <div
+          key={item}
+          className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl shadow-base hover:shadow-lg transition-shadow"
+        >
+          <div className="mb-4 w-12 h-12 rounded-full bg-primary-custom-100 dark:bg-dark-border-custom flex items-center justify-center">
+            <span className="text-2xl">📊</span>
+          </div>
+          <h3 className="mb-2 text-content-primary dark:text-dark-content-primary font-bold">
+            Project {item}
+          </h3>
+          <p className="text-content-secondary dark:text-content-secondary text-sm">
+            Description for project {item}
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+</div>
+```
+
+#### 4. Navigation Bar con Spacing Horizontal
+
+```tsx
+// Navbar con padding y gaps adaptados
+<nav className="px-6 py-4 bg-white dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary">
+  <div className="container mx-auto flex items-center justify-between">
+    {/* Logo */}
+    <div className="text-content-primary dark:text-dark-content-primary font-bold text-xl">
+      Logo
+    </div>
+
+    {/* Nav items con gap-6 */}
+    <ul className="flex gap-6">
+      {['Home', 'About', 'Services', 'Contact'].map((item) => (
+        <li key={item}>
+          <a
+            href={`#${item.toLowerCase()}`}
+            className="text-content-primary dark:text-dark-content-primary font-bold hover:text-primary-custom-600 dark:hover:text-dark-content-primary transition-colors"
+          >
+            {item}
+          </a>
+        </li>
+      ))}
+    </ul>
+
+    {/* CTA Button */}
+    <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold">
+      Sign In
+    </button>
+  </div>
+</nav>
+```
+
+#### 5. List con Spacing Vertical
+
+```tsx
+// Lista con spacing entre items
+<div className="max-w-2xl mx-auto p-8">
+  <h2 className="mb-6 text-content-primary dark:text-dark-content-primary font-bold text-2xl">
+    Notifications
+  </h2>
+
+  {/* Lista con space-y-3 */}
+  <div className="space-y-3">
+    {[1, 2, 3, 4].map((item) => (
+      <div
+        key={item}
+        className="p-4 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-xl hover:border-primary-custom-300 dark:hover:border-dark-border-custom transition-colors"
+      >
+        <div className="flex items-start gap-4">
+          {/* Avatar */}
+          <div className="w-10 h-10 rounded-full bg-primary-custom-100 dark:bg-dark-border-custom flex-shrink-0" />
+
+          {/* Content */}
+          <div className="flex-1">
+            <h3 className="mb-1 text-content-primary dark:text-dark-content-primary font-bold">
+              Notification Title
+            </h3>
+            <p className="text-content-secondary dark:text-content-secondary text-sm">
+              Notification description with some details
+            </p>
+          </div>
+
+          {/* Time */}
+          <span className="text-content-tertiary dark:text-content-tertiary text-xs">
+            2h ago
+          </span>
+        </div>
+      </div>
+    ))}
+  </div>
+</div>
+```
+
+### Mejores Prácticas de Spacing en Dark Mode
+
+#### 1. Mantener Spacing Consistente
+
+```tsx
+// ✅ CORRECTO - Mismo spacing en ambos modos
+<div className="p-6 bg-white dark:bg-dark-bg-primary">
+  Content
+</div>
+
+// ❌ INCORRECTO - Cambiar spacing en dark mode
+<div className="p-6 dark:p-8 bg-white dark:bg-dark-bg-primary">
+  Content
+</div>
+```
+
+#### 2. Combinar con Colores Adaptativos
+
+```tsx
+// ✅ CORRECTO - Todos los colores se adaptan
+<div className="p-6 mb-4 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary">
+  <h3 className="mb-2 text-content-primary dark:text-dark-content-primary">Title</h3>
+  <p className="text-content-secondary dark:text-content-secondary">Content</p>
+</div>
+```
+
+#### 3. Gaps en Flexbox/Grid
+
+```tsx
+// ✅ CORRECTO - Gap consistente, colores adaptativos
+<div className="flex gap-4">
+  <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-white">
+    Button 1
+  </button>
+  <button className="px-4 py-2 border border-border-primary dark:border-dark-border-custom text-content-primary dark:text-dark-content-primary">
+    Button 2
+  </button>
+</div>
+```
+
+#### 4. Spacing Responsive
+
+```tsx
+// ✅ CORRECTO - Spacing responsive + dark mode
+<div className="p-4 md:p-6 lg:p-8 bg-white dark:bg-dark-bg-primary">
+  Responsive padding que funciona en ambos modos
+</div>
+
+// Para containers principales
+<div className="px-4 sm:px-6 lg:px-16 py-8 bg-background-secondary dark:bg-dark-bg-primary">
+  Main content
+</div>
+```
+
+### Ejemplo Completo: Dashboard Layout con Dark Mode
+
+```tsx
+export const DashboardDarkMode = () => {
+  return (
+    <div className="min-h-screen bg-background-secondary dark:bg-dark-bg-primary">
+      {/* Header - px-6 py-4 */}
+      <header className="bg-white dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary px-6 py-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-content-primary dark:text-dark-content-primary font-bold text-xl">
+            Dashboard
+          </h1>
+          <div className="flex items-center gap-4">
+            <button className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold">
+              New Project
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content - p-6 */}
+      <main className="p-6">
+        <div className="max-w-7xl mx-auto">
+          {/* Page title - mb-8 */}
+          <div className="mb-8">
+            <h2 className="mb-2 text-content-primary dark:text-dark-content-primary font-bold text-4xl">
+              Welcome back
+            </h2>
+            <p className="text-content-secondary dark:text-content-secondary">
+              Here's what's happening with your projects
+            </p>
+          </div>
+
+          {/* Stats grid - gap-6, mb-8 */}
+          <div className="grid grid-cols-4 gap-6 mb-8">
+            {['24', '156', '12', '87%'].map((value, index) => (
+              <div
+                key={index}
+                className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl"
+              >
+                <p className="mb-2 text-content-secondary dark:text-content-secondary text-xs">
+                  Stat {index + 1}
+                </p>
+                <p className="text-content-primary dark:text-dark-content-primary font-bold text-3xl">
+                  {value}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* Content sections - grid gap-6 */}
+          <div className="grid grid-cols-3 gap-6">
+            {/* Main content - col-span-2 */}
+            <div className="col-span-2 p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl">
+              <h3 className="mb-6 text-content-primary dark:text-dark-content-primary font-bold text-xl">
+                Recent Activity
+              </h3>
+              <div className="space-y-4">
+                {[1, 2, 3].map((item) => (
+                  <div
+                    key={item}
+                    className="flex items-start gap-4 pb-4 border-b border-border-primary dark:border-dark-border-primary last:border-0"
+                  >
+                    <div className="w-10 h-10 rounded-full bg-primary-custom-100 dark:bg-dark-border-custom" />
+                    <div className="flex-1">
+                      <p className="mb-1 text-content-primary dark:text-dark-content-primary font-bold text-sm">
+                        Activity title
+                      </p>
+                      <p className="text-content-secondary dark:text-content-secondary text-xs">
+                        Description
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Sidebar - space-y-6 */}
+            <div className="space-y-6">
+              <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-2xl">
+                <h4 className="mb-4 text-content-primary dark:text-dark-content-primary font-bold">
+                  Team
+                </h4>
+                <div className="space-y-3">
+                  {[1, 2, 3].map((member) => (
+                    <div key={member} className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded-full bg-primary-custom-600 dark:bg-dark-bg-inverse" />
+                      <div>
+                        <p className="text-content-primary dark:text-dark-content-primary font-bold text-sm">
+                          Member {member}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+```
+
+### Guía de Spacing con Dark Mode
+
+Los mismos valores de spacing funcionan perfectamente en ambos modos:
+
+| Uso | Spacing | Light Mode Colors | Dark Mode Colors |
+|-----|---------|-------------------|------------------|
+| **Card padding** | `p-6` | `bg-white` | `dark:bg-dark-bg-primary` |
+| **Button padding** | `px-4 py-2` | `bg-primary-custom-600` | `dark:bg-dark-bg-inverse` |
+| **Section margin** | `mb-8` | - | - |
+| **Form spacing** | `space-y-6` | - | - |
+| **Grid gap** | `gap-6` | - | - |
+| **Container padding** | `px-6` | `bg-background-secondary` | `dark:bg-dark-bg-primary` |
+
+### Recursos Adicionales sobre Dark Mode
+
+Para más información sobre el modo oscuro:
+- Ver `docs/dark-mode-guide.md` - Guía completa de Dark Mode en Tailwind CSS
+- Ver `docs/colors.md` - Sistema de colores completo con tokens dark mode
+- Ver `docs/border-radius.md` - Border radius con ejemplos de dark mode
+- Ver `docs/shadows.md` - Sombras adaptadas a dark mode
+- Ver `docs/filters.md` - Filtros y glassmorphism en dark mode
+- Ver `docs/typography.md` - Sistema tipográfico adaptado a dark mode
+- [Documentación oficial de Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode)
+
+---
+
+## Referencia Rápida
+
+### Cheat Sheet: Por Caso de Uso
+
+```tsx
+// ===== BOTONES =====
+// Small
+<button className="px-3 py-1.5 text-sm">Small</button>
+
+// Medium (default)
+<button className="px-4 py-2 text-sm">Medium</button>
+
+// Large
+<button className="px-6 py-3 text-base">Large</button>
+
+// ===== CARDS =====
+// Compact
+<div className="p-4">Compact card</div>
+
+// Standard
+<div className="p-6">Standard card</div>
+
+// Spacious
+<div className="p-8">Spacious card</div>
+
+// ===== INPUTS =====
+<input className="px-3 py-2" />
+
+// ===== FORMULARIOS =====
+// Spacing entre campos
+<form className="space-y-6">
+  <div className="space-y-2">
+    <label>Label</label>
+    <input />
+    <p>Helper</p>
+  </div>
+</form>
+
+// ===== GRIDS =====
+// Compact grid
+<div className="grid gap-4">...</div>
+
+// Standard grid
+<div className="grid gap-6">...</div>
+
+// Spacious grid
+<div className="grid gap-8">...</div>
+
+// ===== LAYOUTS =====
+// Page padding
+<div className="px-6 py-12">Page content</div>
+
+// Container
+<div className="container mx-auto px-6">Content</div>
+
+// Section spacing
+<div className="space-y-16">
+  <section>Section 1</section>
+  <section>Section 2</section>
+</div>
+```
+
+### Cheat Sheet: Valores Más Comunes
+
+```tsx
+// Espaciado interno (padding)
+p-3    → 12px  (botones, inputs)
+p-4    → 16px  (cards compactas)
+p-6    → 24px  (cards estándar)
+p-8    → 32px  (cards espaciosas)
+p-12   → 48px  (secciones)
+p-16   → 64px  (containers)
+
+// Espaciado externo (margin)
+mb-2   → 8px   (spacing mínimo)
+mb-4   → 16px  (entre elementos)
+mb-6   → 24px  (entre grupos)
+mb-8   → 32px  (entre secciones relacionadas)
+mb-12  → 48px  (entre secciones)
+mb-16  → 64px  (entre secciones principales)
+
+// Gap (flex/grid)
+gap-2  → 8px   (botones en grupo)
+gap-3  → 12px  (elementos pequeños)
+gap-4  → 16px  (elementos medianos)
+gap-6  → 24px  (cards, elementos grandes)
+gap-8  → 32px  (secciones)
+
+// Responsive padding
+p-4 md:p-6 lg:p-8     (mobile → tablet → desktop)
+px-4 sm:px-6 lg:px-16 (horizontal padding responsive)
+```
+
+### Cheat Sheet: Combinaciones Comunes
+
+```tsx
+// Card con contenido
+<div className="p-6 space-y-4">
+  <h3 className="font-bold">Title</h3>
+  <p>Content</p>
+  <div className="flex gap-3 pt-2">
+    <button className="px-4 py-2">Action</button>
+  </div>
+</div>
+
+// Form field
+<div className="space-y-2">
+  <label className="block font-bold text-sm">Label</label>
+  <input className="w-full px-3 py-2" />
+  <p className="text-xs">Helper text</p>
+</div>
+
+// Navigation
+<nav className="px-6 py-4">
+  <ul className="flex gap-6">
+    <li>Item</li>
+  </ul>
+</nav>
+
+// Modal
+<div className="rounded-3xl">
+  <div className="p-6 border-b">Header</div>
+  <div className="p-6">Body</div>
+  <div className="p-6 border-t flex gap-3 justify-end">
+    <button className="px-4 py-2">Action</button>
+  </div>
+</div>
+
+// Grid de cards
+<div className="grid grid-cols-3 gap-6">
+  <div className="p-6">Card</div>
+</div>
+
+// Hero section
+<section className="px-6 py-16 md:py-24">
+  <h1 className="mb-6">Title</h1>
+  <p className="mb-8">Description</p>
+  <button className="px-6 py-3">CTA</button>
+</section>
+```
+
+### Cheat Sheet: Regla del 4
+
+La mayoría de spacing debe ser múltiplo de 4px:
+
+```
+4px   → 1
+8px   → 2
+12px  → 3  ← Padding de botones
+16px  → 4  ← Spacing base
+24px  → 6  ← Padding de cards
+32px  → 8  ← Gap entre secciones
+48px  → 12 ← Separación entre secciones
+64px  → 16 ← Padding de containers
+```
+
+Valores intermedios (.5) para ajustes finos:
+```
+2px   → 0.5
+6px   → 1.5
+10px  → 2.5
+14px  → 3.5
+```
+
+---
+
+## Recursos Adicionales
+
+### Documentación de Tailwind CSS
+
+- **Padding**: https://tailwindcss.com/docs/padding
+- **Margin**: https://tailwindcss.com/docs/margin
+- **Space Between**: https://tailwindcss.com/docs/space
+- **Gap**: https://tailwindcss.com/docs/gap
+
+### Archivos Relacionados
+
+- `tailwind.config.js` - Configuración de spacing personalizado (tailwind.config.js:109-112)
+- `docs/typography.md` - Sistema de tipografía (combina bien con spacing)
+- `docs/colors.md` - Sistema de colores
+- `docs/border-radius.md` - Border radius para complementar cards
+
+### Conversión de Unidades
+
+```
+1rem = 16px (por defecto en navegadores)
+
+Spacing → Pixels:
+0.5  → 2px
+1    → 4px
+1.5  → 6px
+2    → 8px
+3    → 12px
+4    → 16px
+6    → 24px
+8    → 32px
+12   → 48px
+16   → 64px
+```
+
+### Tips de Performance
+
+1. **Usar `gap` en lugar de margin cuando sea posible**: Más eficiente para el navegador
+2. **Evitar valores arbitrarios**: Los valores del sistema están optimizados
+3. **Usar spacing responsive**: Mejora la experiencia en diferentes dispositivos
+
+---
+
+**Última actualización**: 2025-11-11
+**Versión**: 1.0.0
+**Mantenedor**: Siesa UI Kit Team