siesa-ui-kit 1.0.5 → 1.0.7

package/docs/spacing.md

@@ -1,1684 +0,0 @@
-# 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