siesa-ui-kit 1.0.4 → 1.0.5

package/docs/filters.md

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