siesa-ui-kit 1.0.5 → 1.0.7

package/docs/filters.md

@@ -1,1243 +0,0 @@
-# Sistema de Filtros - Siesa UI Kit
-
-## 📋 Tabla de Contenidos
-
-1. [Introducción](#introducción)
-2. [Blur (Desenfoque)](#blur-desenfoque)
-3. [Backdrop Blur](#backdrop-blur)
-4. [Guía de Uso](#guía-de-uso)
-5. [Ejemplos de Código](#ejemplos-de-código)
-6. [Mejores Prácticas](#mejores-prácticas)
-7. [Dark Mode](#dark-mode)
-8. [Referencia Rápida](#referencia-rápida)
-
----
-
-## Introducción
-
-El sistema de filtros de Siesa UI Kit proporciona efectos de desenfoque (blur) para crear profundidad visual y enfatizar contenido. Los filtros son especialmente útiles para overlays, modales y efectos glassmorphism modernos.
-
-### Objetivos del Sistema
-
-- **Enfoque Visual**: Dirigir la atención del usuario desenfocando contenido secundario
-- **Efectos Modernos**: Crear interfaces con glassmorphism y efectos de vidrio esmerilado
-- **Jerarquía**: Establecer capas visuales claras
-- **Performance**: Valores optimizados para rendimiento en navegadores modernos
-
-### Principios de Diseño
-
-1. **Usar con Moderación**: El blur es costoso en performance, usar solo cuando aporte valor
-2. **Progresión Suave**: Escalas progresivas desde desenfoque sutil hasta intenso
-3. **Backdrop para Overlays**: Usar backdrop-blur para modales y overlays semi-transparentes
-4. **Blur para Efectos**: Usar blur regular para desenfocar contenido completo
-
----
-
-## Blur (Desenfoque)
-
-El filtro `blur` aplica desenfoque a todo el elemento, incluyendo su contenido y bordes.
-
-### Escala de Blur
-
-| Clase Tailwind | Valor CSS | Blur Radius | Uso Principal |
-|----------------|-----------|-------------|---------------|
-| `blur-none` | `filter: blur(0px)` | 0px | Sin desenfoque |
-| `blur-sm` | `filter: blur(2px)` | 2px | Desenfoque mínimo |
-| `blur` o `blur-base` | `filter: blur(4px)` | 4px | **Desenfoque sutil** |
-| `blur-md` | `filter: blur(6px)` | 6px | Desenfoque medio-bajo |
-| `blur-lg` | `filter: blur(8px)` | 8px | **Desenfoque medio** |
-| `blur-xl` | `filter: blur(12px)` | 12px | Desenfoque alto |
-| `blur-2xl` | `filter: blur(20px)` | 20px | Desenfoque muy alto |
-| `blur-3xl` | `filter: blur(32px)` | 32px | Desenfoque máximo |
-
-### Cuándo Usar Blur
-
-```tsx
-// ✅ Imágenes de fondo
-<div className="blur-lg">
-  <img src="/background.jpg" alt="Background" />
-</div>
-
-// ✅ Placeholders de carga
-<div className="blur-md animate-pulse">
-  Loading content...
-</div>
-
-// ✅ Contenido spoiler
-<div className={revealed ? 'blur-none' : 'blur-xl'}>
-  Spoiler content
-</div>
-```
-
-### Valores Más Comunes
-
-- **`blur` (4px)**: Desenfoque sutil para fondos
-- **`blur-lg` (8px)**: Desenfoque medio para overlays
-- **`blur-xl` (12px)**: Desenfoque alto para efectos dramáticos
-
----
-
-## Backdrop Blur
-
-El filtro `backdrop-blur` aplica desenfoque **solo al fondo** detrás del elemento, no al contenido del elemento. Es ideal para overlays semi-transparentes.
-
-### Escala de Backdrop Blur
-
-| Clase Tailwind | Valor CSS | Blur Radius | Uso Principal |
-|----------------|-----------|-------------|---------------|
-| `backdrop-blur-none` | `backdrop-filter: blur(0px)` | 0px | Sin desenfoque de fondo |
-| `backdrop-blur-sm` | `backdrop-filter: blur(2px)` | 2px | Glassmorphism sutil |
-| `backdrop-blur` o `backdrop-blur-base` | `backdrop-filter: blur(4px)` | 4px | **Glassmorphism estándar** |
-| `backdrop-blur-md` | `backdrop-filter: blur(6px)` | 6px | Overlay medio |
-| `backdrop-blur-lg` | `backdrop-filter: blur(8px)` | 8px | **Overlay modal** |
-| `backdrop-blur-xl` | `backdrop-filter: blur(12px)` | 12px | Overlay intenso |
-| `backdrop-blur-2xl` | `backdrop-filter: blur(20px)` | 20px | Efecto de vidrio esmerilado |
-| `backdrop-blur-3xl` | `backdrop-filter: blur(32px)` | 32px | Efecto máximo |
-
-### Cuándo Usar Backdrop Blur
-
-```tsx
-// ✅ Modal overlays
-<div className="backdrop-blur-lg bg-black/50">
-  <div className="modal-content">...</div>
-</div>
-
-// ✅ Glassmorphism cards
-<div className="backdrop-blur-md bg-white/30 rounded-2xl">
-  Card content visible, background blurred
-</div>
-
-// ✅ Navigation bars semi-transparentes
-<nav className="backdrop-blur-sm bg-white/80 sticky top-0">
-  Navigation items
-</nav>
-```
-
-### Valores Más Comunes
-
-- **`backdrop-blur` (4px)**: Glassmorphism sutil
-- **`backdrop-blur-lg` (8px)**: Overlays de modales
-- **`backdrop-blur-xl` (12px)**: Efectos de vidrio intensos
-
-### Diferencia entre Blur y Backdrop Blur
-
-```tsx
-// blur - Desenfoca TODO el elemento
-<div className="blur-lg bg-white/50">
-  <p>Este texto está desenfocado ❌</p>
-</div>
-
-// backdrop-blur - Solo desenfoca el FONDO
-<div className="backdrop-blur-lg bg-white/50">
-  <p>Este texto está nítido ✅</p>
-</div>
-```
-
----
-
-## Guía de Uso
-
-### Por Caso de Uso
-
-#### 1. Overlays de Modales
-
-```tsx
-// Overlay con backdrop-blur
-<div className="fixed inset-0 backdrop-blur-lg bg-black/50 flex items-center justify-center">
-  {/* Modal content */}
-  <div className="rounded-3xl bg-white shadow-xl p-8">
-    <h2>Modal Title</h2>
-    <p>Modal content is clear, background is blurred</p>
-  </div>
-</div>
-```
-
-**Recomendación**: `backdrop-blur-lg` + `bg-black/50` para overlays oscuros
-
-#### 2. Glassmorphism Cards
-
-```tsx
-// Card con efecto de vidrio
-<div className="backdrop-blur-md bg-white/30 border border-white/50 rounded-2xl p-6 shadow-xl">
-  <h3 className="font-bold text-lg">Glassmorphism Card</h3>
-  <p>Content is visible, background behind card is blurred</p>
-</div>
-```
-
-**Recomendación**: `backdrop-blur-md` + `bg-white/30` para efecto de vidrio
-
-#### 3. Navigation Bar Flotante
-
-```tsx
-// Navbar que desenfoca el fondo mientras se desplaza
-<nav className="sticky top-0 z-50 backdrop-blur-sm bg-white/80 border-b border-border-primary">
-  <div className="container mx-auto px-6 py-4">
-    <ul className="flex gap-6">
-      <li>Home</li>
-      <li>About</li>
-      <li>Contact</li>
-    </ul>
-  </div>
-</nav>
-```
-
-**Recomendación**: `backdrop-blur-sm` + `bg-white/80` para navbars
-
-#### 4. Loading States
-
-```tsx
-// Skeleton con blur mientras carga
-<div className={isLoading ? 'blur-md animate-pulse' : 'blur-none'}>
-  <img src={imageSrc} alt="Content" />
-  <p>Content description</p>
-</div>
-```
-
-**Recomendación**: `blur-md` para estados de carga
-
-#### 5. Spoiler/Hidden Content
-
-```tsx
-// Contenido que se revela al hacer click
-const [revealed, setRevealed] = useState(false);
-
-<div
-  onClick={() => setRevealed(true)}
-  className={`cursor-pointer transition-all duration-300 ${
-    revealed ? 'blur-none' : 'blur-xl'
-  }`}
->
-  <p>Click to reveal spoiler content!</p>
-</div>
-```
-
-**Recomendación**: `blur-xl` para contenido oculto, transición a `blur-none`
-
-#### 6. Imágenes de Fondo
-
-```tsx
-// Hero section con imagen de fondo desenfocada
-<div className="relative h-screen">
-  <div className="absolute inset-0 blur-2xl opacity-50">
-    <img src="/hero-bg.jpg" alt="" className="w-full h-full object-cover" />
-  </div>
-  <div className="relative z-10 flex items-center justify-center h-full">
-    <h1 className="text-6xl font-bold text-white">
-      Hero Title
-    </h1>
-  </div>
-</div>
-```
-
-**Recomendación**: `blur-2xl` + `opacity-50` para fondos decorativos
-
----
-
-## Ejemplos de Código
-
-### Ejemplo 1: Modal con Backdrop Blur
-
-```tsx
-export const GlassModal = ({ isOpen, onClose, children }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Overlay con backdrop-blur */}
-      <div
-        className="absolute inset-0 backdrop-blur-lg bg-black/50 transition-all"
-        onClick={onClose}
-      />
-
-      {/* Modal content - nítido */}
-      <div className="relative z-10 rounded-3xl bg-white shadow-2xl max-w-2xl w-full">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border-primary">
-          <h2 className="text-2xl font-bold">Modal con Backdrop Blur</h2>
-          <button
-            onClick={onClose}
-            className="rounded-full hover:bg-gray-100 p-2"
-          >
-            <XIcon />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="p-6">
-          {children}
-        </div>
-
-        {/* Footer */}
-        <div className="flex gap-3 justify-end p-6 border-t border-border-primary">
-          <button
-            onClick={onClose}
-            className="rounded-md border border-border-primary px-4 py-2 font-bold"
-          >
-            Cancelar
-          </button>
-          <button className="rounded-md bg-primary-custom-600 text-white px-4 py-2 font-bold">
-            Confirmar
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-```
-
-### Ejemplo 2: Glassmorphism Card Grid
-
-```tsx
-export const GlassCardGrid = () => {
-  const cards = [
-    { title: 'Analytics', value: '1,234', icon: <ChartIcon /> },
-    { title: 'Users', value: '5,678', icon: <UserIcon /> },
-    { title: 'Revenue', value: '$12.5k', icon: <DollarIcon /> },
-  ];
-
-  return (
-    <div
-      className="min-h-screen p-8"
-      style={{
-        backgroundImage: 'url(/gradient-bg.jpg)',
-        backgroundSize: 'cover',
-      }}
-    >
-      <div className="grid grid-cols-3 gap-6">
-        {cards.map((card) => (
-          <div
-            key={card.title}
-            className="backdrop-blur-md bg-white/30 border border-white/50 rounded-2xl p-6 shadow-xl hover:bg-white/40 transition-all"
-          >
-            <div className="flex items-center gap-4 mb-4">
-              <div className="w-12 h-12 rounded-full bg-primary-custom-600/20 flex items-center justify-center">
-                {card.icon}
-              </div>
-              <h3 className="font-bold text-lg">{card.title}</h3>
-            </div>
-            <p className="text-4xl font-bold">{card.value}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-### Ejemplo 3: Floating Navigation Bar
-
-```tsx
-export const FloatingNav = () => {
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrolled(window.scrollY > 50);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <nav
-      className={`sticky top-0 z-50 transition-all duration-300 ${
-        scrolled
-          ? 'backdrop-blur-md bg-white/80 shadow-md'
-          : 'bg-transparent'
-      }`}
-    >
-      <div className="container mx-auto px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="font-bold text-xl">Logo</div>
-          <ul className="flex gap-6 font-bold">
-            <li>
-              <a href="#home" className="hover:text-primary-custom-600">
-                Home
-              </a>
-            </li>
-            <li>
-              <a href="#about" className="hover:text-primary-custom-600">
-                About
-              </a>
-            </li>
-            <li>
-              <a href="#contact" className="hover:text-primary-custom-600">
-                Contact
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  );
-};
-```
-
-### Ejemplo 4: Image Gallery con Blur Hover
-
-```tsx
-export const BlurImageGallery = ({ images }) => {
-  return (
-    <div className="grid grid-cols-4 gap-4 p-8">
-      {images.map((image, index) => (
-        <div
-          key={index}
-          className="group relative aspect-square overflow-hidden rounded-xl cursor-pointer"
-        >
-          {/* Imagen */}
-          <img
-            src={image.src}
-            alt={image.alt}
-            className="w-full h-full object-cover transition-all duration-300 group-hover:blur-sm group-hover:scale-110"
-          />
-
-          {/* Overlay que aparece en hover */}
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 backdrop-blur-none">
-            <button className="rounded-md bg-white px-4 py-2 font-bold shadow-lg">
-              Ver Detalles
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-```
-
-### Ejemplo 5: Loading Skeleton con Blur
-
-```tsx
-export const ContentLoader = ({ isLoading, children }) => {
-  return (
-    <div className="relative">
-      {/* Contenido real */}
-      <div
-        className={`transition-all duration-500 ${
-          isLoading ? 'blur-md opacity-50' : 'blur-none opacity-100'
-        }`}
-      >
-        {children}
-      </div>
-
-      {/* Indicador de carga */}
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="rounded-full bg-white p-4 shadow-lg">
-            <div className="animate-spin w-8 h-8 border-4 border-primary-custom-600 border-t-transparent rounded-full" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// Uso
-<ContentLoader isLoading={isLoading}>
-  <div className="space-y-4">
-    <h2 className="text-2xl font-bold">Article Title</h2>
-    <p>Article content...</p>
-  </div>
-</ContentLoader>
-```
-
----
-
-## Mejores Prácticas
-
-### ✅ Hacer
-
-1. **Usar backdrop-blur para overlays**
-   ```tsx
-   // ✅ CORRECTO - backdrop-blur mantiene el contenido nítido
-   <div className="backdrop-blur-lg bg-black/50">
-     <p className="text-white">Texto nítido</p>
-   </div>
-   ```
-
-2. **Combinar con opacidad para mejores efectos**
-   ```tsx
-   // ✅ CORRECTO - backdrop-blur + opacidad
-   <div className="backdrop-blur-md bg-white/30 border border-white/50">
-     Glassmorphism effect
-   </div>
-   ```
-
-3. **Usar transiciones para cambios suaves**
-   ```tsx
-   // ✅ CORRECTO - transición suave
-   <div className={`transition-all duration-300 ${blur ? 'blur-xl' : 'blur-none'}`}>
-     Content
-   </div>
-   ```
-
-4. **Optimizar performance con will-change**
-   ```tsx
-   // ✅ CORRECTO - optimización para animaciones
-   <div className="backdrop-blur-lg" style={{ willChange: 'backdrop-filter' }}>
-     Optimized blur
-   </div>
-   ```
-
-5. **Usar valores moderados por defecto**
-   ```tsx
-   // ✅ CORRECTO - blur moderado
-   <div className="backdrop-blur-md">Modal overlay</div>
-   ```
-
-### ❌ Evitar
-
-1. **No usar blur regular para overlays**
-   ```tsx
-   // ❌ INCORRECTO - blur desenfoca el contenido también
-   <div className="blur-lg bg-black/50">
-     <p>Texto desenfocado (no legible) ❌</p>
-   </div>
-
-   // ✅ CORRECTO - backdrop-blur solo desenfoca el fondo
-   <div className="backdrop-blur-lg bg-black/50">
-     <p>Texto nítido (legible) ✅</p>
-   </div>
-   ```
-
-2. **No aplicar blur muy alto a elementos interactivos**
-   ```tsx
-   // ❌ INCORRECTO - botón ilegible
-   <button className="blur-2xl">Click me</button>
-
-   // ✅ CORRECTO - botón nítido
-   <button className="backdrop-blur-md bg-white/30">Click me</button>
-   ```
-
-3. **No apilar múltiples blurs innecesariamente**
-   ```tsx
-   // ❌ INCORRECTO - performance cost alto
-   <div className="backdrop-blur-lg">
-     <div className="backdrop-blur-lg">
-       <div className="backdrop-blur-lg">Content</div>
-     </div>
-   </div>
-
-   // ✅ CORRECTO - un solo blur en el nivel apropiado
-   <div className="backdrop-blur-lg">
-     <div>
-       <div>Content</div>
-     </div>
-   </div>
-   ```
-
-4. **No usar blur sin opacidad en fondos**
-   ```tsx
-   // ❌ INCORRECTO - blur sin ver el fondo
-   <div className="backdrop-blur-lg bg-white">
-     No se ve el efecto de blur
-   </div>
-
-   // ✅ CORRECTO - blur con transparencia
-   <div className="backdrop-blur-lg bg-white/30">
-     Se ve el efecto de blur
-   </div>
-   ```
-
-5. **No olvidar fallbacks para navegadores antiguos**
-   ```tsx
-   // ❌ INCORRECTO - sin fallback
-   <div className="backdrop-blur-lg bg-white/30">
-     Content
-   </div>
-
-   // ✅ CORRECTO - con fallback
-   <div className="backdrop-blur-lg bg-white/30 supports-[backdrop-filter]:bg-white/30 supports-[not_backdrop-filter]:bg-white/80">
-     Content
-   </div>
-   ```
-
-### Performance
-
-1. **Backdrop-filter es costoso**: Usar con moderación
-2. **Evitar blur en scroll**: Puede causar lag en móviles
-3. **Usar will-change para animaciones**: Optimiza rendering
-4. **Limitar áreas con blur**: No aplicar a toda la página
-
-```tsx
-// ✅ BUENA PRÁCTICA - will-change para performance
-<div
-  className="backdrop-blur-lg transition-all"
-  style={{ willChange: 'backdrop-filter' }}
->
-  Animated blur
-</div>
-```
-
-### Accesibilidad
-
-1. **No depender solo de blur para ocultar contenido sensible**
-   - Usar blur + técnicas adicionales de ocultamiento
-
-2. **Asegurar contraste suficiente**
-   - El blur puede reducir el contraste del texto
-
-3. **Proveer alternativas sin blur**
-   - Algunos usuarios pueden tener problemas con efectos visuales
-
-```tsx
-// ✅ CORRECTO - modo reducido de movimiento
-<div className={`
-  ${prefersReducedMotion ? 'bg-black/80' : 'backdrop-blur-lg bg-black/50'}
-`}>
-  Content
-</div>
-```
-
----
-
-## Dark Mode
-
-Los filtros de blur y backdrop-blur funcionan de la misma manera en light y dark mode, pero es crucial combinarlos con colores y opacidades apropiadas para cada modo para mantener la legibilidad y la estética.
-
-### 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 Filtros
-
-```tsx
-// Patrón básico - Backdrop blur con colores adaptativos
-<div className="backdrop-blur-lg bg-white/50 dark:bg-black/50 p-6">
-  Glassmorphism adaptado a dark mode
-</div>
-
-// Los valores de blur NO cambian, pero los colores SÍ:
-// - bg-white/50 en modo claro → bg-black/50 en modo oscuro
-```
-
-### Principios de Filtros en Dark Mode
-
-**Regla de Oro**: Los valores de blur y backdrop-blur permanecen iguales, pero los colores de fondo y las opacidades deben adaptarse:
-
-```tsx
-// ✅ CORRECTO - Backdrop blur con colores adaptativos
-<div className="backdrop-blur-lg bg-white/50 dark:bg-black/50">
-  Glassmorphism adaptado a dark mode
-</div>
-
-// ✅ CORRECTO - Modal overlay con mayor opacidad en dark
-<div className="backdrop-blur-lg bg-black/50 dark:bg-black/70">
-  Overlay con mayor opacidad en dark mode para mejor contraste
-</div>
-
-// ❌ INCORRECTO - Cambiar valor de blur en dark mode
-<div className="backdrop-blur-lg dark:backdrop-blur-sm">
-  NO hacer esto - mantener blur consistente
-</div>
-```
-
-### Combinando Filtros con Estados Interactivos
-
-El modificador `dark:` se puede combinar con hover y otros estados:
-
-```tsx
-// Dark mode + Hover
-<button className="
-  backdrop-blur-md
-  bg-white/30 dark:bg-white/10
-  hover:bg-white/40 dark:hover:bg-white/20
-  border border-white/50 dark:border-white/20
-  rounded-md
-  px-4 py-2
-">
-  Glass button con hover
-</button>
-
-// Dark mode + Focus
-<input className="
-  backdrop-blur-sm
-  bg-white/80 dark:bg-dark-bg-primary/80
-  focus:backdrop-blur-md
-  border border-border-primary dark:border-dark-border-primary
-  rounded-md
-" />
-```
-
-### Orden de Modificadores
-
-Tailwind CSS recomienda un orden específico:
-
-**Formato**: `{responsive}:{dark}:{state}:{utility}`
-
-```tsx
-// ✅ CORRECTO - Orden: responsive → dark → state → utility
-<div className="
-  backdrop-blur-md
-  md:backdrop-blur-lg
-  bg-white/30
-  md:dark:bg-white/10
-  md:dark:hover:bg-white/20
-">
-  Card con orden correcto
-</div>
-
-// ❌ INCORRECTO - Orden equivocado
-<div className="
-  dark:md:hover:bg-white/20
-  backdrop-blur-md
-">
-  Orden confuso
-</div>
-```
-
-### Glassmorphism en Dark Mode
-
-El efecto glassmorphism necesita ajustes especiales para dark mode:
-
-```tsx
-// Glassmorphism Card - Light Mode
-<div className="backdrop-blur-md bg-white/30 border border-white/50 rounded-2xl p-6">
-  <h3 className="text-content-primary font-bold">Light Mode Glass</h3>
-  <p className="text-content-secondary">Contenido con efecto de vidrio</p>
-</div>
-
-// Glassmorphism Card - Dark Mode adaptado
-<div className="backdrop-blur-md bg-white/30 dark:bg-white/10 border border-white/50 dark:border-white/20 rounded-2xl p-6">
-  <h3 className="text-content-primary dark:text-dark-content-primary font-bold">
-    Adaptive Glass
-  </h3>
-  <p className="text-content-secondary dark:text-content-secondary">
-    Efecto de vidrio que se adapta
-  </p>
-</div>
-```
-
-### Ejemplos de Componentes con Filtros en Dark Mode
-
-#### 1. Modal con Backdrop Blur Adaptado
-
-```tsx
-export const ModalDarkModeBlur = ({ isOpen, onClose, children }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Overlay adaptado - más opaco en dark mode */}
-      <div
-        className="absolute inset-0 backdrop-blur-lg bg-black/50 dark:bg-black/70 transition-all"
-        onClick={onClose}
-      />
-
-      {/* Modal content */}
-      <div className="relative z-10 rounded-3xl bg-white dark:bg-dark-bg-primary shadow-2xl max-w-2xl w-full">
-        <div className="flex items-center justify-between p-6 border-b border-border-primary dark:border-dark-border-primary">
-          <h2 className="text-content-primary dark:text-dark-content-primary text-2xl font-bold">
-            Modal Title
-          </h2>
-          <button
-            onClick={onClose}
-            className="rounded-full hover:bg-background-secondary dark:hover:bg-dark-bg-primary p-2"
-          >
-            <XIcon />
-          </button>
-        </div>
-
-        <div className="p-6">
-          <div className="text-content-primary dark:text-dark-content-primary">
-            {children}
-          </div>
-        </div>
-
-        <div className="flex gap-3 justify-end p-6 border-t border-border-primary dark:border-dark-border-primary">
-          <button
-            onClick={onClose}
-            className="rounded-md border border-border-primary dark:border-dark-border-custom px-4 py-2 font-bold text-content-primary dark:text-dark-content-primary"
-          >
-            Cancelar
-          </button>
-          <button className="rounded-md bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse px-4 py-2 font-bold">
-            Confirmar
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-```
-
-#### 2. Glassmorphism Navigation Bar
-
-```tsx
-export const GlassNavDarkMode = () => {
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrolled(window.scrollY > 50);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <nav
-      className={`sticky top-0 z-50 transition-all duration-300 ${
-        scrolled
-          ? 'backdrop-blur-md bg-white/80 dark:bg-dark-bg-primary/80 shadow-md'
-          : 'bg-transparent'
-      }`}
-    >
-      <div className="container mx-auto px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="font-bold text-xl text-content-primary dark:text-dark-content-primary">
-            Logo
-          </div>
-          <ul className="flex gap-6 font-bold text-content-primary dark:text-dark-content-primary">
-            <li>
-              <a href="#home" className="hover:text-primary-custom-600 dark:hover:text-dark-content-primary">
-                Home
-              </a>
-            </li>
-            <li>
-              <a href="#about" className="hover:text-primary-custom-600 dark:hover:text-dark-content-primary">
-                About
-              </a>
-            </li>
-            <li>
-              <a href="#contact" className="hover:text-primary-custom-600 dark:hover:text-dark-content-primary">
-                Contact
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  );
-};
-```
-
-#### 3. Glassmorphism Card Grid
-
-```tsx
-export const GlassCardGridDarkMode = () => {
-  const cards = [
-    { id: 1, title: 'Analytics', value: '1,234', icon: '📊' },
-    { id: 2, title: 'Users', value: '5,678', icon: '👥' },
-    { id: 3, title: 'Revenue', value: '$12.5k', icon: '💰' },
-  ];
-
-  return (
-    <div
-      className="min-h-screen p-8 bg-gradient-to-br from-primary-custom-600 to-purple-600 dark:from-dark-bg-primary dark:to-gray-900"
-      style={{
-        backgroundImage: 'url(/gradient-bg.jpg)',
-        backgroundSize: 'cover',
-      }}
-    >
-      <div className="grid grid-cols-3 gap-6">
-        {cards.map((card) => (
-          <div
-            key={card.id}
-            className="backdrop-blur-md bg-white/30 dark:bg-white/10 border border-white/50 dark:border-white/20 rounded-2xl p-6 shadow-xl hover:bg-white/40 dark:hover:bg-white/15 transition-all"
-          >
-            <div className="flex items-center gap-4 mb-4">
-              <div className="w-12 h-12 rounded-full bg-primary-custom-600/20 dark:bg-white/10 flex items-center justify-center text-2xl">
-                {card.icon}
-              </div>
-              <h3 className="font-bold text-lg text-content-primary dark:text-white">
-                {card.title}
-              </h3>
-            </div>
-            <p className="text-4xl font-bold text-content-primary dark:text-white">
-              {card.value}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-#### 4. Loading State con Blur
-
-```tsx
-export const ContentLoaderDarkMode = ({ isLoading, children }) => {
-  return (
-    <div className="relative">
-      {/* Contenido real */}
-      <div
-        className={`transition-all duration-500 ${
-          isLoading
-            ? 'blur-md opacity-50'
-            : 'blur-none opacity-100'
-        }`}
-      >
-        <div className="text-content-primary dark:text-dark-content-primary">
-          {children}
-        </div>
-      </div>
-
-      {/* Indicador de carga */}
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="rounded-full bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary p-4 shadow-lg">
-            <div className="animate-spin w-8 h-8 border-4 border-primary-custom-600 dark:border-dark-content-primary border-t-transparent rounded-full" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-### Mejores Prácticas para Filtros en Dark Mode
-
-#### 1. Ajustar Opacidades para Mejor Contraste
-
-```tsx
-// ✅ CORRECTO - Opacidad mayor en dark mode para mantener contraste
-<div className="backdrop-blur-lg bg-white/50 dark:bg-black/70">
-  Overlay con buen contraste en ambos modos
-</div>
-
-// ❌ INCORRECTO - Misma opacidad en ambos modos
-<div className="backdrop-blur-lg bg-black/50">
-  Puede verse mal en dark mode
-</div>
-```
-
-#### 2. Glassmorphism Adaptativo
-
-```tsx
-// ✅ CORRECTO - Glassmorphism adaptado
-<div className="backdrop-blur-md bg-white/30 dark:bg-white/10 border border-white/50 dark:border-white/20">
-  <h3 className="text-content-primary dark:text-white">Title</h3>
-</div>
-
-// ❌ INCORRECTO - No se adapta a dark mode
-<div className="backdrop-blur-md bg-white/30 border border-white/50">
-  <h3 className="text-gray-900">Title</h3>
-</div>
-```
-
-#### 3. Combinar con Colores de Texto Apropiados
-
-```tsx
-// ✅ CORRECTO - Texto adaptado para mantener legibilidad sobre blur
-<div className="backdrop-blur-lg bg-black/50 dark:bg-black/70 rounded-2xl p-6">
-  <h2 className="text-white font-bold text-2xl mb-2">
-    Texto claramente legible
-  </h2>
-  <p className="text-white/80">
-    Contenido secundario también legible
-  </p>
-</div>
-
-// ✅ CORRECTO - Para glassmorphism, usar colores del sistema
-<div className="backdrop-blur-md bg-white/30 dark:bg-white/10 rounded-2xl p-6">
-  <h3 className="text-content-primary dark:text-white font-bold">
-    Título
-  </h3>
-  <p className="text-content-secondary dark:text-white/70">
-    Descripción
-  </p>
-</div>
-```
-
-#### 4. Modal Overlays con Backdrop Blur
-
-```tsx
-// ✅ CORRECTO - Overlay más oscuro en dark mode
-<div className="backdrop-blur-lg bg-black/50 dark:bg-black/70">
-  Modal overlay adaptado
-</div>
-
-// Para overlays claros (menos común)
-<div className="backdrop-blur-lg bg-white/50 dark:bg-black/50">
-  Overlay que cambia completamente en dark mode
-</div>
-```
-
-### Ejemplo Completo: Hero con Glassmorphism Adaptado
-
-```tsx
-export const GlassHeroDarkMode = () => {
-  return (
-    <div
-      className="relative min-h-screen flex items-center justify-center p-8 bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-900 dark:to-black"
-      style={{
-        backgroundImage: 'url(/hero-bg.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}
-    >
-      {/* Glassmorphism card con contenido */}
-      <div className="backdrop-blur-xl bg-white/30 dark:bg-black/30 border border-white/50 dark:border-white/10 rounded-3xl p-12 max-w-3xl shadow-2xl">
-        {/* Title */}
-        <h1 className="text-white font-bold text-6xl tracking-tighter mb-6 text-center">
-          Bienvenido a Siesa UI Kit
-        </h1>
-
-        {/* Description */}
-        <p className="text-white/90 text-xl mb-8 text-center max-w-2xl mx-auto">
-          Sistema de diseño moderno con soporte completo para glassmorphism
-          y dark mode. Crea interfaces hermosas que funcionan perfectamente
-          en cualquier entorno.
-        </p>
-
-        {/* CTA buttons */}
-        <div className="flex gap-4 justify-center mb-8">
-          <button className="backdrop-blur-md bg-white/20 dark:bg-white/10 hover:bg-white/30 dark:hover:bg-white/20 border border-white/50 dark:border-white/30 text-white px-6 py-3 rounded-xl font-bold transition-all">
-            Comenzar
-          </button>
-          <button className="bg-white dark:bg-dark-bg-inverse text-primary-custom-600 dark:text-dark-content-inverse px-6 py-3 rounded-xl font-bold hover:bg-white/90 transition-all">
-            Documentación
-          </button>
-        </div>
-
-        {/* Stats */}
-        <div className="grid grid-cols-3 gap-4 pt-8 border-t border-white/30 dark:border-white/10">
-          {[
-            { label: 'Components', value: '50+' },
-            { label: 'Themes', value: '2' },
-            { label: 'Icons', value: '1000+' },
-          ].map((stat) => (
-            <div key={stat.label} className="text-center">
-              <p className="text-white font-bold text-3xl mb-1">{stat.value}</p>
-              <p className="text-white/70 text-sm">{stat.label}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-```
-
-### Guía de Opacidades para Dark Mode
-
-Opacidades recomendadas para diferentes casos:
-
-| Caso de Uso | Light Mode | Dark Mode | Razón |
-|-------------|------------|-----------|-------|
-| **Modal Overlay** | `bg-black/50` | `bg-black/70` | Mayor opacidad para mejor contraste |
-| **Glassmorphism Card** | `bg-white/30` | `bg-white/10` | Menos opacidad para evitar brillantez |
-| **Glass Navigation** | `bg-white/80` | `bg-black/80` | Alta opacidad para legibilidad |
-| **Glass Border** | `border-white/50` | `border-white/20` | Bordes más sutiles en dark mode |
-| **Hover State** | `bg-white/40` | `bg-white/15` | Progresión proporcional |
-
-### 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/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
-// ===== OVERLAYS DE MODALES =====
-<div className="backdrop-blur-lg bg-black/50">Modal</div>
-
-// ===== GLASSMORPHISM CARDS =====
-<div className="backdrop-blur-md bg-white/30 border border-white/50">Glass Card</div>
-
-// ===== NAVIGATION BARS =====
-<nav className="backdrop-blur-sm bg-white/80 sticky top-0">Nav</nav>
-
-// ===== LOADING STATES =====
-<div className="blur-md animate-pulse">Loading...</div>
-
-// ===== SPOILER CONTENT =====
-<div className={revealed ? 'blur-none' : 'blur-xl'}>Spoiler</div>
-
-// ===== BACKGROUND IMAGES =====
-<div className="blur-2xl opacity-50">
-  <img src="/bg.jpg" />
-</div>
-```
-
-### Cheat Sheet: Todas las Escalas
-
-**Blur (desenfoca elemento completo)**
-```css
-blur-none    → blur(0px)
-blur-sm      → blur(2px)
-blur         → blur(4px)   /* blur-base */
-blur-md      → blur(6px)
-blur-lg      → blur(8px)
-blur-xl      → blur(12px)
-blur-2xl     → blur(20px)
-blur-3xl     → blur(32px)
-```
-
-**Backdrop Blur (desenfoca solo el fondo)**
-```css
-backdrop-blur-none  → backdrop-filter: blur(0px)
-backdrop-blur-sm    → backdrop-filter: blur(2px)
-backdrop-blur       → backdrop-filter: blur(4px)   /* backdrop-blur-base */
-backdrop-blur-md    → backdrop-filter: blur(6px)
-backdrop-blur-lg    → backdrop-filter: blur(8px)
-backdrop-blur-xl    → backdrop-filter: blur(12px)
-backdrop-blur-2xl   → backdrop-filter: blur(20px)
-backdrop-blur-3xl   → backdrop-filter: blur(32px)
-```
-
-### Cheat Sheet: Combinaciones Comunes
-
-```tsx
-// Modal overlay oscuro
-className="backdrop-blur-lg bg-black/50"
-
-// Modal overlay claro
-className="backdrop-blur-lg bg-white/50"
-
-// Glass card oscuro
-className="backdrop-blur-md bg-black/30 border border-white/20"
-
-// Glass card claro
-className="backdrop-blur-md bg-white/30 border border-white/50"
-
-// Navbar flotante
-className="backdrop-blur-sm bg-white/80"
-
-// Hero background
-className="blur-2xl opacity-50"
-
-// Loading state
-className="blur-md animate-pulse"
-
-// Spoiler hide
-className="blur-xl"
-```
-
-### Cheat Sheet: Transiciones
-
-```tsx
-// Transición básica de blur
-<div className="blur-none hover:blur-md transition-all">...</div>
-
-// Transición con duración
-<div className="blur-none hover:blur-lg transition-all duration-500">...</div>
-
-// Toggle blur con estado
-<div className={`transition-all duration-300 ${isBlurred ? 'blur-xl' : 'blur-none'}`}>...</div>
-
-// Backdrop blur animado
-<div className={`transition-all ${show ? 'backdrop-blur-lg' : 'backdrop-blur-none'}`}>...</div>
-```
-
----
-
-## Recursos Adicionales
-
-### Soporte de Navegadores
-
-**backdrop-filter** (Backdrop Blur):
-- ✅ Chrome/Edge: 76+
-- ✅ Firefox: 103+
-- ✅ Safari: 9+ (con -webkit-prefix hasta v14)
-- ❌ IE: No soportado
-
-**filter: blur** (Blur regular):
-- ✅ Excelente soporte en todos los navegadores modernos
-- ✅ IE: 10+ (con limitaciones)
-
-### Fallbacks para Navegadores Antiguos
-
-```tsx
-// Con fallback para navegadores sin backdrop-filter
-<div className="
-  backdrop-blur-lg
-  bg-white/30
-  [@supports(backdrop-filter:blur(0))]:bg-white/30
-  [@supports(not(backdrop-filter:blur(0)))]:bg-white/80
-">
-  Content con fallback
-</div>
-```
-
-### Enlaces Útiles
-
-- **CSS backdrop-filter**: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
-- **CSS filter**: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-- **Tailwind Blur**: https://tailwindcss.com/docs/blur
-- **Tailwind Backdrop Blur**: https://tailwindcss.com/docs/backdrop-blur
-- **Can I Use backdrop-filter**: https://caniuse.com/css-backdrop-filter
-
-### Archivos Relacionados
-
-- `docs/shadows.md` - Sistema de sombras (se combina bien con blur)
-- `docs/colors.md` - Sistema de colores (para fondos con opacidad)
-- `docs/border-radius.md` - Border radius (para glassmorphism cards)
-
-### Performance Tips
-
-```tsx
-// ✅ Optimizar con will-change
-<div
-  className="backdrop-blur-lg"
-  style={{ willChange: 'backdrop-filter' }}
->
-  Optimized
-</div>
-
-// ✅ Usar transform: translateZ para hardware acceleration
-<div
-  className="backdrop-blur-lg"
-  style={{ transform: 'translateZ(0)' }}
->
-  Hardware accelerated
-</div>
-
-// ✅ Limitar el área con blur
-<div className="backdrop-blur-lg max-w-2xl">
-  Limited area
-</div>
-
-// ❌ Evitar blur en toda la página
-<body className="backdrop-blur-lg"> {/* No recomendado */}
-  ...
-</body>
-```
-
----
-
-**Última actualización**: 2025-11-11
-**Versión**: 1.0.0
-**Mantenedor**: Siesa UI Kit Team