/*!
 * HanezUI — design system de WOW Desarrollos Digitales
 * Bundle generado automáticamente por scripts/build-bundle.js
 * No editar a mano. Ejecutar: npm run build
 */

/* ==========================================
   Foundations
   ========================================== */

/* --- styles/fonts.css --- */
/* =========================================================
   HanezUI — Fonts
   Inter para UI/texto, JetBrains Mono para código y números
   tabulares. Se cargan desde Google Fonts con display=swap
   para evitar FOUT.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

html, body {
  font-family: var(--wow-font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

code, pre, kbd, samp {
  font-family: var(--wow-font-mono);
  font-feature-settings: 'calt', 'liga';
}

/* --- styles/reset.css --- */
/* HanezUI — reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body {
  height: 100%;
  background: var(--wow-bg);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-base);
  line-height: var(--wow-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-semibold);
  line-height: var(--wow-leading-tight);
}
h1 { font-size: var(--wow-text-3xl); }
h2 { font-size: var(--wow-text-2xl); }
h3 { font-size: var(--wow-text-xl); }
h4 { font-size: var(--wow-text-lg); }

a {
  color: var(--wow-accent);
  text-decoration: none;
  transition: color var(--wow-transition-fast);
}
a:hover { color: var(--wow-accent-hover); }

code, pre { font-family: var(--wow-font-mono); font-size: 0.9em; }

::selection { background: var(--wow-accent-soft); color: var(--wow-text-strong); }

/* Scrollbar discreto para tema oscuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wow-bg); }
::-webkit-scrollbar-thumb {
  background: var(--wow-border-strong);
  border-radius: var(--wow-radius-full);
  border: 2px solid var(--wow-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--wow-text-subtle); }

/* Focus visible consistente */
:focus-visible {
  outline: 2px solid var(--wow-accent);
  outline-offset: 2px;
  border-radius: var(--wow-radius-sm);
}

/* --- styles/tokens.css --- */
/* =========================================================
   HanezUI — Design Tokens
   Única fuente de verdad para colores, tipografía, espaciado,
   radios, sombras y transiciones. Todos los productos WOW
   (Hanez, DataHub, WowFlow) deben consumir estas variables.
   ========================================================= */

:root {
  /* ---------- Paleta base — Negro azulado ---------- */
  --wow-bg:             #0B0F1A;  /* fondo app */
  --wow-bg-elevated:    #0F1524;  /* fondo secciones elevadas */
  --wow-surface:        #111827;  /* tarjetas, modales, inputs */
  --wow-surface-hover:  #1A2233;  /* hover de superficies */
  --wow-border:         #1F2937;  /* bordes sutiles */
  --wow-border-strong:  #2D3748;  /* bordes enfatizados */

  /* ---------- Texto ---------- */
  --wow-text:           #E5E7EB;  /* texto principal */
  --wow-text-strong:    #F9FAFB;  /* títulos */
  --wow-text-muted:     #9CA3AF;  /* texto secundario */
  --wow-text-subtle:    #6B7280;  /* placeholders, labels */
  --wow-text-inverse:   #0B0F1A;  /* texto sobre acento */

  /* ---------- Acento (brand) ---------- */
  --wow-accent:         #38BDF8;  /* azul cian — acción primaria */
  --wow-accent-hover:   #0EA5E9;
  --wow-accent-active:  #0284C7;
  --wow-accent-soft:    rgba(56, 189, 248, 0.12);
  --wow-accent-ring:    rgba(56, 189, 248, 0.35);

  /* ---------- Estados semánticos ---------- */
  --wow-success:        #10B981;
  --wow-success-soft:   rgba(16, 185, 129, 0.12);
  --wow-warning:        #F59E0B;
  --wow-warning-soft:   rgba(245, 158, 11, 0.12);
  --wow-danger:         #EF4444;
  --wow-danger-soft:    rgba(239, 68, 68, 0.12);
  --wow-info:           #6366F1;
  --wow-info-soft:      rgba(99, 102, 241, 0.12);

  /* ---------- Tipografía ---------- */
  --wow-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wow-font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code',
                   Menlo, Consolas, monospace;

  /* Escala tipográfica (1rem = 16px) */
  --wow-text-xs:    0.75rem;    /* 12px */
  --wow-text-sm:    0.875rem;   /* 14px */
  --wow-text-base:  1rem;       /* 16px */
  --wow-text-lg:    1.125rem;   /* 18px */
  --wow-text-xl:    1.25rem;    /* 20px */
  --wow-text-2xl:   1.5rem;     /* 24px */
  --wow-text-3xl:   1.875rem;   /* 30px */
  --wow-text-4xl:   2.25rem;    /* 36px */

  /* Pesos */
  --wow-weight-regular:  400;
  --wow-weight-medium:   500;
  --wow-weight-semibold: 600;
  --wow-weight-bold:     700;

  /* Interlineado */
  --wow-leading-tight:   1.25;
  --wow-leading-normal:  1.5;
  --wow-leading-relaxed: 1.75;

  /* ---------- Espaciado (escala 4px) ---------- */
  --wow-space-0:  0;
  --wow-space-1:  0.25rem;  /*  4px */
  --wow-space-2:  0.5rem;   /*  8px */
  --wow-space-3:  0.75rem;  /* 12px */
  --wow-space-4:  1rem;     /* 16px */
  --wow-space-5:  1.25rem;  /* 20px */
  --wow-space-6:  1.5rem;   /* 24px */
  --wow-space-8:  2rem;     /* 32px */
  --wow-space-10: 2.5rem;   /* 40px */
  --wow-space-12: 3rem;     /* 48px */
  --wow-space-16: 4rem;     /* 64px */

  /* ---------- Radios ---------- */
  --wow-radius-none: 0;
  --wow-radius-sm:   4px;
  --wow-radius-md:   6px;
  --wow-radius-lg:   8px;
  --wow-radius-xl:  12px;
  --wow-radius-2xl: 16px;
  --wow-radius-full: 9999px;

  /* ---------- Sombras (ajustadas para tema oscuro) ---------- */
  --wow-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --wow-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --wow-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --wow-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --wow-shadow-glow: 0 0 0 3px var(--wow-accent-ring);

  /* ---------- Transiciones ---------- */
  --wow-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --wow-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --wow-transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Charts (paleta de series) ---------- */
  --wow-chart-1: #38BDF8;
  --wow-chart-2: #818CF8;
  --wow-chart-3: #34D399;
  --wow-chart-4: #FBBF24;
  --wow-chart-5: #F87171;
  --wow-chart-6: #FB923C;
  --wow-chart-7: #A78BFA;
  --wow-chart-8: #2DD4BF;

  /* ---------- Z-index ---------- */
  --wow-z-base:     1;
  --wow-z-dropdown: 100;
  --wow-z-sticky:   200;
  --wow-z-overlay:  900;
  --wow-z-modal:    1000;
  --wow-z-toast:    1100;
  --wow-z-tooltip:  1200;

  /* ---------- Layout ---------- */
  --wow-container-sm: 640px;
  --wow-container-md: 768px;
  --wow-container-lg: 1024px;
  --wow-container-xl: 1280px;
  --wow-sidebar-w:    240px;
  --wow-header-h:     56px;

  /* ---------- Breakpoints (referencia — usar en media queries) ----------
     xs:    0      Móvil pequeño (< 640px)
     sm:  640px    Móvil grande / tablet vertical
     md:  768px    Tablet horizontal
     lg: 1024px    Laptop / desktop pequeño
     xl: 1280px    Desktop
     2xl:1536px    Desktop grande
  */
  --wow-bp-sm:  640px;
  --wow-bp-md:  768px;
  --wow-bp-lg: 1024px;
  --wow-bp-xl: 1280px;
  --wow-bp-2xl:1536px;
}

/* =========================================================
   Utilidades responsive — ocultar/mostrar por breakpoint.
   Uso: class="wow-hide-mobile" oculta < sm. class="wow-only-mobile" solo muestra < sm.
   ========================================================= */
.wow-only-mobile  { display: initial; }
.wow-hide-mobile  { display: none; }
.wow-only-tablet  { display: none; }
.wow-only-desktop { display: none; }

@media (min-width: 640px) {
  .wow-only-mobile  { display: none; }
  .wow-hide-mobile  { display: initial; }
  .wow-only-tablet  { display: initial; }
}
@media (min-width: 1024px) {
  .wow-only-tablet  { display: none; }
  .wow-only-desktop { display: initial; }
}

/* Contenedor centrado con ancho máximo por breakpoint */
.wow-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--wow-space-4);
}
@media (min-width: 640px)  { .wow-container { max-width: var(--wow-container-sm); padding: 0 var(--wow-space-5); } }
@media (min-width: 768px)  { .wow-container { max-width: var(--wow-container-md); } }
@media (min-width: 1024px) { .wow-container { max-width: var(--wow-container-lg); padding: 0 var(--wow-space-6); } }
@media (min-width: 1280px) { .wow-container { max-width: var(--wow-container-xl); } }

/* --- styles/themes.css --- */
/* =========================================================
   HanezUI — Themes
   Permite alternar entre tema oscuro (default) y claro,
   y cambiar el color de acento (cyan/purple/emerald/orange).
   Uso:
     <html data-theme="light" data-accent="purple">
   ========================================================= */

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  --wow-bg:             #F8FAFC;
  --wow-bg-elevated:    #FFFFFF;
  --wow-surface:        #FFFFFF;
  --wow-surface-hover:  #F1F5F9;
  --wow-border:         #E2E8F0;
  --wow-border-strong:  #CBD5E1;

  --wow-text:           #1E293B;
  --wow-text-strong:    #0F172A;
  --wow-text-muted:     #64748B;
  --wow-text-subtle:    #94A3B8;
  --wow-text-inverse:   #FFFFFF;

  --wow-accent-soft:    rgba(56, 189, 248, 0.14);
  --wow-success-soft:   rgba(16, 185, 129, 0.14);
  --wow-warning-soft:   rgba(245, 158, 11, 0.14);
  --wow-danger-soft:    rgba(239, 68, 68, 0.14);
  --wow-info-soft:      rgba(99, 102, 241, 0.14);

  --wow-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --wow-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
  --wow-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  --wow-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08);
}

/* ---------- Acentos alternativos ---------- */
[data-accent="purple"] {
  --wow-accent:         #A855F7;
  --wow-accent-hover:   #9333EA;
  --wow-accent-active:  #7E22CE;
  --wow-accent-soft:    rgba(168, 85, 247, 0.14);
  --wow-accent-ring:    rgba(168, 85, 247, 0.35);
}

[data-accent="emerald"] {
  --wow-accent:         #10B981;
  --wow-accent-hover:   #059669;
  --wow-accent-active:  #047857;
  --wow-accent-soft:    rgba(16, 185, 129, 0.14);
  --wow-accent-ring:    rgba(16, 185, 129, 0.35);
}

[data-accent="orange"] {
  --wow-accent:         #F97316;
  --wow-accent-hover:   #EA580C;
  --wow-accent-active:  #C2410C;
  --wow-accent-soft:    rgba(249, 115, 22, 0.14);
  --wow-accent-ring:    rgba(249, 115, 22, 0.35);
}

[data-accent="rose"] {
  --wow-accent:         #F43F5E;
  --wow-accent-hover:   #E11D48;
  --wow-accent-active:  #BE123C;
  --wow-accent-soft:    rgba(244, 63, 94, 0.14);
  --wow-accent-ring:    rgba(244, 63, 94, 0.35);
}

[data-accent="gold"] {
  --wow-accent:         #D4AF37;
  --wow-accent-hover:   #B8941F;
  --wow-accent-active:  #9C7D15;
  --wow-accent-soft:    rgba(212, 175, 55, 0.16);
  --wow-accent-ring:    rgba(212, 175, 55, 0.40);
}

/* ---------- Tema Noir — negro profundo + acento dorado por defecto ---------- */
[data-theme="noir"] {
  --wow-bg:             #050505;
  --wow-bg-elevated:    #0C0C0C;
  --wow-surface:        #141414;
  --wow-surface-hover:  #1F1F1F;
  --wow-border:         #262626;
  --wow-border-strong:  #3A3A3A;

  --wow-text:           #EDE4C4;
  --wow-text-strong:    #FFF8E1;
  --wow-text-muted:     #9A8E6B;
  --wow-text-subtle:    #6B6045;
  --wow-text-inverse:   #0A0A0A;

  --wow-accent:         #D4AF37;
  --wow-accent-hover:   #E6C255;
  --wow-accent-active:  #B8941F;
  --wow-accent-soft:    rgba(212, 175, 55, 0.14);
  --wow-accent-ring:    rgba(212, 175, 55, 0.40);

  --wow-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --wow-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
  --wow-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
  --wow-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.6);
  --wow-shadow-glow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

/* --- styles/brand.css --- */
/* =========================================================
   Marca Hanez — logo discreto implícito en todas las vistas
   Uso:
     <span class="wow-brand-mark"></span>
     <span class="wow-brand-mark wow-brand-mark--corner"></span>
     <span class="wow-brand-mark wow-brand-mark--inline"></span>
   ========================================================= */

:root {
  --wow-brand-logo: url('/logo.jpg');
  --wow-brand-size: 20px;
  --wow-brand-opacity: 0.55;
}

.wow-brand-mark {
  display: inline-block;
  width: var(--wow-brand-size);
  height: var(--wow-brand-size);
  background-image: var(--wow-brand-logo);
  background-size: cover;
  background-position: center;
  border-radius: var(--wow-radius-sm);
  opacity: var(--wow-brand-opacity);
  flex-shrink: 0;
  transition: opacity var(--wow-transition-fast);
  vertical-align: middle;
}
.wow-brand-mark:hover { opacity: 1; }

/* Variante inline con texto "Hanez" al lado */
.wow-brand-mark--inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 2px 6px;
  background-image: none;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  letter-spacing: 0.04em;
}
.wow-brand-mark--inline::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: var(--wow-brand-logo);
  background-size: cover;
  background-position: center;
  border-radius: var(--wow-radius-sm);
  opacity: var(--wow-brand-opacity);
  flex-shrink: 0;
}
.wow-brand-mark--inline:hover { color: var(--wow-text-muted); }
.wow-brand-mark--inline:hover::before { opacity: 1; }

/* Variante esquina: pequeña, fija en la esquina inferior derecha del contenedor.
   El contenedor padre debe tener position: relative. */
.wow-brand-mark--corner {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  opacity: 0.35;
  pointer-events: none;
}

/* Variante footer: bloque centrado bajo el contenido */
.wow-brand-mark--footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  margin-top: var(--wow-space-4);
  padding: var(--wow-space-2);
  background-image: none;
  color: var(--wow-text-subtle);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.wow-brand-mark--footer::before {
  content: '';
  width: 12px;
  height: 12px;
  background-image: var(--wow-brand-logo);
  background-size: cover;
  background-position: center;
  border-radius: var(--wow-radius-sm);
  flex-shrink: 0;
}

/* Tamaños opcionales */
.wow-brand-mark--sm { --wow-brand-size: 14px; }
.wow-brand-mark--md { --wow-brand-size: 20px; }
.wow-brand-mark--lg { --wow-brand-size: 28px; }

/* ==========================================
   Form controls
   ========================================== */

/* --- components/button/button.css --- */
.wow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wow-space-2);
  padding: 0 var(--wow-space-4);
  height: 36px;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--wow-radius-md);
  background: transparent;
  color: var(--wow-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--wow-transition-fast), border-color var(--wow-transition-fast), color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-btn:disabled, .wow-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.wow-btn > svg, .wow-btn > i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }

/* Variantes */
.wow-btn--primary {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  border-color: var(--wow-accent);
}
.wow-btn--primary:hover:not(:disabled) { background: var(--wow-accent-hover); border-color: var(--wow-accent-hover); }
.wow-btn--primary:active:not(:disabled) { background: var(--wow-accent-active); border-color: var(--wow-accent-active); }

.wow-btn--secondary {
  background: var(--wow-surface);
  color: var(--wow-text);
  border-color: var(--wow-border);
}
.wow-btn--secondary:hover:not(:disabled) { background: var(--wow-surface-hover); border-color: var(--wow-border-strong); }

.wow-btn--ghost { background: transparent; color: var(--wow-text); }
.wow-btn--ghost:hover:not(:disabled) { background: var(--wow-surface-hover); }

.wow-btn--danger {
  background: var(--wow-danger);
  color: #fff;
  border-color: var(--wow-danger);
}
.wow-btn--danger:hover:not(:disabled) { background: #DC2626; border-color: #DC2626; }

.wow-btn--link {
  background: transparent;
  color: var(--wow-accent);
  padding: 0;
  height: auto;
  border: none;
}
.wow-btn--link:hover:not(:disabled) { color: var(--wow-accent-hover); text-decoration: underline; }

/* Tamaños */
.wow-btn--sm { height: 28px; padding: 0 var(--wow-space-3); font-size: var(--wow-text-xs); }
.wow-btn--lg { height: 44px; padding: 0 var(--wow-space-5); font-size: var(--wow-text-base); }

/* Icon only */
.wow-btn--icon { padding: 0; width: 36px; }
.wow-btn--icon.wow-btn--sm { width: 28px; }
.wow-btn--icon.wow-btn--lg { width: 44px; }

/* --- components/input/input.css --- */
.wow-field { display: flex; flex-direction: column; gap: var(--wow-space-2); }
.wow-label {
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text);
}
.wow-label-required::after { content: ' *'; color: var(--wow-danger); }

.wow-input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 var(--wow-space-3);
  background: var(--wow-surface);
  color: var(--wow-text);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast), background var(--wow-transition-fast);
}
.wow-input::placeholder { color: var(--wow-text-subtle); }
.wow-input:hover:not(:disabled) { border-color: var(--wow-border-strong); }
.wow-input:focus {
  outline: none;
  border-color: var(--wow-accent);
  box-shadow: 0 0 0 3px var(--wow-accent-ring);
}
.wow-input:disabled { opacity: 0.5; cursor: not-allowed; }

.wow-input--error { border-color: var(--wow-danger); }
.wow-input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }

textarea.wow-input { height: auto; padding: var(--wow-space-3); resize: vertical; min-height: 80px; line-height: var(--wow-leading-normal); }
select.wow-input { appearance: none; padding-right: var(--wow-space-8); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right var(--wow-space-3) center; }

.wow-input-group { position: relative; }
.wow-input-group .wow-input { padding-left: var(--wow-space-8); }
.wow-input-group__icon {
  position: absolute; left: var(--wow-space-3); top: 50%; transform: translateY(-50%);
  color: var(--wow-text-subtle); pointer-events: none;
}
.wow-input-group__icon svg, .wow-input-group__icon i { width: 16px; height: 16px; }

.wow-help { font-size: var(--wow-text-xs); color: var(--wow-text-muted); }
.wow-help--error { color: var(--wow-danger); }

/* Checkbox & radio */
.wow-check {
  display: inline-flex; align-items: center; gap: var(--wow-space-2);
  font-size: var(--wow-text-sm); color: var(--wow-text); cursor: pointer;
}
.wow-check input {
  appearance: none;
  width: 16px; height: 16px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-sm);
  display: grid; place-content: center;
  cursor: pointer; transition: all var(--wow-transition-fast);
}
.wow-check input[type='radio'] { border-radius: var(--wow-radius-full); }
.wow-check input:hover { border-color: var(--wow-accent); }
.wow-check input:checked { background: var(--wow-accent); border-color: var(--wow-accent); }
.wow-check input[type='checkbox']:checked::after {
  content: ''; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0F1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.wow-check input[type='radio']:checked::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wow-text-inverse);
}

/* --- components/select/select.css --- */
/* ------------------------------------------------------------------
   WOW Select — dropdown custom con soporte para búsqueda, multi y acción
   ------------------------------------------------------------------ */
.wow-select {
  position: relative;
  width: 100%;
  max-width: 320px;
  font-family: var(--wow-font-sans);
}

.wow-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--wow-space-1) var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-select__trigger:hover { border-color: var(--wow-border-strong); }
.wow-select--open .wow-select__trigger,
.wow-select__trigger:focus-visible {
  border-color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
  outline: none;
}
.wow-select__trigger:disabled { opacity: 0.5; cursor: not-allowed; }

.wow-select__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  flex-wrap: wrap;
}
.wow-select__placeholder { color: var(--wow-text-subtle); }

.wow-select__caret {
  color: var(--wow-text-subtle);
  transition: transform var(--wow-transition-fast);
  flex-shrink: 0;
}
.wow-select--open .wow-select__caret { transform: rotate(180deg); }
.wow-select__caret > i[data-lucide], .wow-select__caret > svg { width: 16px; height: 16px; }

/* Menu */
.wow-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-lg);
  z-index: var(--wow-z-dropdown);
  max-height: 280px;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.wow-select--open .wow-select__menu { display: flex; }

.wow-select__search {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  border-bottom: 1px solid var(--wow-border);
  color: var(--wow-text-subtle);
}
.wow-select__search > i[data-lucide], .wow-select__search > svg { width: 14px; height: 14px; flex-shrink: 0; }
.wow-select__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  font-family: var(--wow-font-sans);
}
.wow-select__search input::placeholder { color: var(--wow-text-subtle); }

.wow-select__options {
  list-style: none;
  margin: 0;
  padding: var(--wow-space-1);
  overflow-y: auto;
  max-height: 220px;
}
.wow-select__option {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  border-radius: var(--wow-radius-sm);
  cursor: pointer;
  user-select: none;
}
.wow-select__option:hover,
.wow-select__option--focus { background: var(--wow-surface-hover); }
.wow-select__option--selected {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  font-weight: var(--wow-weight-medium);
}
.wow-select__option-check {
  margin-left: auto;
  color: var(--wow-accent);
  display: none;
}
.wow-select__option-check > i[data-lucide], .wow-select__option-check > svg { width: 14px; height: 14px; }
.wow-select__option--selected .wow-select__option-check { display: inline-flex; }

.wow-select__option-desc {
  display: block;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  margin-top: 2px;
}

/* Checkbox (multi) */
.wow-select__check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
  transition: background var(--wow-transition-fast), border-color var(--wow-transition-fast);
}
.wow-select__check > i[data-lucide], .wow-select__check > svg { width: 12px; height: 12px; }
.wow-select__option--selected .wow-select__check {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
  color: var(--wow-text-inverse);
}

/* Empty */
.wow-select__empty {
  padding: var(--wow-space-5) var(--wow-space-3);
  text-align: center;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}

/* Footer action */
.wow-select__action {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-3);
  border-top: 1px solid var(--wow-border);
  background: var(--wow-bg-elevated);
  color: var(--wow-accent);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
  border: none;
  border-top: 1px solid var(--wow-border);
  width: 100%;
  text-align: left;
}
.wow-select__action:hover { background: var(--wow-surface-hover); }
.wow-select__action > i[data-lucide], .wow-select__action > svg { width: 14px; height: 14px; }

/* Chip para multi en trigger */
.wow-select__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: 2px var(--wow-space-2);
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  border-radius: var(--wow-radius-sm);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  line-height: 1.4;
}
.wow-select__chip-remove {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 0.7;
}
.wow-select__chip-remove:hover { opacity: 1; }
.wow-select__chip-remove > i[data-lucide], .wow-select__chip-remove > svg { width: 10px; height: 10px; }

.wow-select__clear {
  color: var(--wow-text-subtle);
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
}
.wow-select__clear:hover { color: var(--wow-text); }
.wow-select__clear > i[data-lucide], .wow-select__clear > svg { width: 14px; height: 14px; }

/* --- components/search/search.css --- */
.wow-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.wow-search__input {
  width: 100%;
  height: 36px;
  padding: 0 calc(var(--wow-space-3) + 24px) 0 calc(var(--wow-space-3) + 24px);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  outline: none;
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-search__input::placeholder { color: var(--wow-text-subtle); }
.wow-search__input:hover:not(:disabled) { border-color: var(--wow-border-strong); }
.wow-search__input:focus {
  border-color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
}
.wow-search__input:disabled { opacity: 0.5; cursor: not-allowed; }

.wow-search__icon {
  position: absolute;
  left: var(--wow-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--wow-text-subtle);
  pointer-events: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.wow-search__icon > i[data-lucide], .wow-search__icon > svg { width: 16px; height: 16px; }

.wow-search__clear {
  position: absolute;
  right: var(--wow-space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--wow-radius-full);
  color: var(--wow-text-subtle);
  cursor: pointer;
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
  opacity: 0;
  pointer-events: none;
}
.wow-search--has-value .wow-search__clear {
  opacity: 1;
  pointer-events: auto;
}
.wow-search__clear:hover { color: var(--wow-text); background: var(--wow-surface-hover); }
.wow-search__clear > i[data-lucide], .wow-search__clear > svg { width: 12px; height: 12px; }

.wow-search__shortcut {
  position: absolute;
  right: var(--wow-space-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text-subtle);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  pointer-events: none;
}
.wow-search--has-value .wow-search__shortcut { display: none; }

/* Tamaños */
.wow-search--sm .wow-search__input { height: 28px; font-size: var(--wow-text-xs); padding-left: 26px; padding-right: 26px; }
.wow-search--sm .wow-search__icon { width: 14px; height: 14px; left: var(--wow-space-2); }
.wow-search--sm .wow-search__icon > i[data-lucide], .wow-search--sm .wow-search__icon > svg { width: 14px; height: 14px; }

.wow-search--lg .wow-search__input { height: 44px; font-size: var(--wow-text-base); }

/* Variante dentro de toolbar */
.wow-search--ghost .wow-search__input {
  background: transparent;
  border-color: transparent;
}
.wow-search--ghost .wow-search__input:hover { background: var(--wow-surface); border-color: var(--wow-border); }
.wow-search--ghost .wow-search__input:focus { background: var(--wow-surface); }

/* Block: fila completa */
.wow-search--block { max-width: 100%; }

/* --- components/datepicker/datepicker.css --- */
.wow-date {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 240px;
}

.wow-date__input {
  width: 100%;
  height: 36px;
  padding: 0 var(--wow-space-3) 0 calc(var(--wow-space-3) + 20px);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  outline: none;
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
  color-scheme: dark;
}
.wow-date__input::placeholder { color: var(--wow-text-subtle); }
.wow-date__input:hover:not(:disabled) { border-color: var(--wow-border-strong); }
.wow-date__input:focus { border-color: var(--wow-accent); box-shadow: var(--wow-shadow-glow); }
.wow-date__input:disabled { opacity: 0.5; cursor: not-allowed; }
.wow-date__input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.wow-date__icon {
  position: absolute;
  left: var(--wow-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--wow-text-subtle);
  pointer-events: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.wow-date__icon > i[data-lucide], .wow-date__icon > svg { width: 16px; height: 16px; }

/* Range */
.wow-date-range {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  padding: 0 var(--wow-space-3);
  height: 36px;
}
.wow-date-range:focus-within { border-color: var(--wow-accent); box-shadow: var(--wow-shadow-glow); }
.wow-date-range i[data-lucide] { width: 16px; height: 16px; color: var(--wow-text-subtle); }
.wow-date-range__sep { color: var(--wow-text-subtle); }
.wow-date-range input {
  border: none;
  background: transparent;
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  outline: none;
  color-scheme: dark;
}
.wow-date-range input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* Error state */
.wow-date--error .wow-date__input { border-color: var(--wow-danger); }
.wow-date--error .wow-date__input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }

/* --- components/toggle/toggle.css --- */
.wow-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-3);
  cursor: pointer;
  user-select: none;
}

.wow-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.wow-toggle__track {
  width: 36px;
  height: 20px;
  background: var(--wow-surface-hover);
  border: 1px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-full);
  position: relative;
  transition: background var(--wow-transition-fast), border-color var(--wow-transition-fast);
  flex-shrink: 0;
}
.wow-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--wow-text-muted);
  border-radius: var(--wow-radius-full);
  transition: transform var(--wow-transition-fast), background var(--wow-transition-fast);
}

.wow-toggle input:checked + .wow-toggle__track {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
}
.wow-toggle input:checked + .wow-toggle__track .wow-toggle__thumb {
  background: var(--wow-text-inverse);
  transform: translateX(16px);
}
.wow-toggle input:focus-visible + .wow-toggle__track { box-shadow: var(--wow-shadow-glow); }
.wow-toggle input:disabled + .wow-toggle__track { opacity: 0.5; cursor: not-allowed; }

.wow-toggle--lg .wow-toggle__track { width: 44px; height: 24px; }
.wow-toggle--lg .wow-toggle__thumb { width: 20px; height: 20px; }
.wow-toggle--lg input:checked + .wow-toggle__track .wow-toggle__thumb { transform: translateX(20px); }

.wow-toggle__label {
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
}
.wow-toggle__hint {
  display: block;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  margin-top: 2px;
}

/* --- components/form-extras/form-extras.css --- */
/* =========================================================
   Elementos de formulario adicionales
   - Slider (range)
   - Number stepper
   - OTP / PIN
   - Password con fuerza
   - Color picker
   - Field genérico con hint/error
   ========================================================= */

/* ---------- Slider ---------- */
.wow-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
  outline: none;
  cursor: pointer;
}
.wow-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--wow-accent);
  border: 3px solid var(--wow-bg);
  border-radius: var(--wow-radius-full);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--wow-accent);
}
.wow-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--wow-accent);
  border: 3px solid var(--wow-bg);
  border-radius: var(--wow-radius-full);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--wow-accent);
}
.wow-slider:focus-visible { box-shadow: var(--wow-shadow-glow); }

.wow-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-2);
}
.wow-slider-wrap__head {
  display: flex;
  justify-content: space-between;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-slider-wrap__value {
  color: var(--wow-accent);
  font-family: var(--wow-font-mono);
  font-weight: var(--wow-weight-semibold);
}

/* Rango (dos thumbs visualizado) */
.wow-slider-range {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
.wow-slider-range__track {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
}
.wow-slider-range__fill {
  position: absolute;
  height: 4px;
  background: var(--wow-accent);
  border-radius: var(--wow-radius-full);
}

/* ---------- Number stepper ---------- */
.wow-stepper-input {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  overflow: hidden;
  background: var(--wow-surface);
}
.wow-stepper-input:focus-within { border-color: var(--wow-accent); box-shadow: var(--wow-shadow-glow); }

.wow-stepper-input__btn {
  width: 36px;
  background: transparent;
  border: none;
  color: var(--wow-text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.wow-stepper-input__btn:hover:not(:disabled) { background: var(--wow-surface-hover); color: var(--wow-accent); }
.wow-stepper-input__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wow-stepper-input__btn > i[data-lucide], .wow-stepper-input__btn > svg { width: 14px; height: 14px; }

.wow-stepper-input input {
  width: 60px;
  padding: 0;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--wow-text);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-sm);
  outline: none;
}
.wow-stepper-input input::-webkit-outer-spin-button,
.wow-stepper-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wow-stepper-input--lg .wow-stepper-input__btn { width: 44px; }
.wow-stepper-input--lg input { height: 44px; width: 80px; font-size: var(--wow-text-base); }

/* ---------- OTP / PIN ---------- */
.wow-otp {
  display: inline-flex;
  gap: var(--wow-space-2);
}
.wow-otp input {
  width: 44px;
  height: 52px;
  text-align: center;
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xl);
  font-weight: var(--wow-weight-semibold);
  background: var(--wow-surface);
  color: var(--wow-text-strong);
  border: 1px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-md);
  outline: none;
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
  caret-color: var(--wow-accent);
}
.wow-otp input:focus {
  border-color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
}
.wow-otp input:not(:placeholder-shown) { border-color: var(--wow-accent); color: var(--wow-accent); }

.wow-otp--error input { border-color: var(--wow-danger); }

.wow-otp__sep {
  display: grid;
  place-items: center;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-lg);
}

/* ---------- Password con medidor de fuerza ---------- */
.wow-pass {
  position: relative;
}
.wow-pass__toggle {
  position: absolute;
  right: var(--wow-space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--wow-text-subtle);
  cursor: pointer;
  border-radius: var(--wow-radius-sm);
}
.wow-pass__toggle:hover { color: var(--wow-text); background: var(--wow-surface-hover); }
.wow-pass__toggle > i[data-lucide], .wow-pass__toggle > svg { width: 14px; height: 14px; }

.wow-pass__strength {
  display: flex;
  gap: 4px;
  margin-top: var(--wow-space-2);
}
.wow-pass__bar {
  flex: 1;
  height: 3px;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
  transition: background var(--wow-transition-fast);
}
.wow-pass__strength--1 .wow-pass__bar:nth-child(-n+1) { background: var(--wow-danger); }
.wow-pass__strength--2 .wow-pass__bar:nth-child(-n+2) { background: var(--wow-warning); }
.wow-pass__strength--3 .wow-pass__bar:nth-child(-n+3) { background: var(--wow-accent); }
.wow-pass__strength--4 .wow-pass__bar:nth-child(-n+4) { background: var(--wow-success); }

.wow-pass__meta {
  margin-top: var(--wow-space-1);
  display: flex;
  justify-content: space-between;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}

.wow-pass__rules {
  margin-top: var(--wow-space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wow-space-1) var(--wow-space-3);
}
.wow-pass__rule {
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-pass__rule > i[data-lucide] { width: 12px; height: 12px; color: var(--wow-text-subtle); }
.wow-pass__rule--ok { color: var(--wow-success); }
.wow-pass__rule--ok > i[data-lucide] { color: var(--wow-success); }

/* ---------- Color picker ---------- */
.wow-color-picker {
  display: flex;
  gap: var(--wow-space-2);
  flex-wrap: wrap;
  align-items: center;
}
.wow-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--wow-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform var(--wow-transition-fast);
}
.wow-color-swatch:hover { transform: scale(1.1); }
.wow-color-swatch--active {
  border-color: var(--wow-text-strong);
  box-shadow: 0 0 0 3px var(--wow-bg), 0 0 0 4px var(--wow-accent);
}
.wow-color-custom {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--wow-border-strong);
  border-radius: var(--wow-radius-full);
  color: var(--wow-text-muted);
  cursor: pointer;
}
.wow-color-custom:hover { border-color: var(--wow-accent); color: var(--wow-accent); border-style: solid; }
.wow-color-custom > i[data-lucide] { width: 14px; height: 14px; }

/* ==========================================
   Data display
   ========================================== */

/* --- components/badge/badge.css --- */
.wow-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: 2px var(--wow-space-2);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  line-height: 1.4;
  border-radius: var(--wow-radius-full);
  background: var(--wow-surface);
  color: var(--wow-text-muted);
  border: 1px solid var(--wow-border);
  white-space: nowrap;
}
.wow-badge > svg, .wow-badge > i[data-lucide] { width: 12px; height: 12px; }

.wow-badge--neutral   { background: var(--wow-surface);        color: var(--wow-text-muted); border-color: var(--wow-border); }
.wow-badge--accent    { background: var(--wow-accent-soft);    color: var(--wow-accent);     border-color: transparent; }
.wow-badge--success   { background: var(--wow-success-soft);   color: var(--wow-success);    border-color: transparent; }
.wow-badge--warning   { background: var(--wow-warning-soft);   color: var(--wow-warning);    border-color: transparent; }
.wow-badge--danger    { background: var(--wow-danger-soft);    color: var(--wow-danger);     border-color: transparent; }
.wow-badge--info      { background: var(--wow-info-soft);      color: var(--wow-info);       border-color: transparent; }

.wow-badge--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* --- components/tag/tag.css --- */
/* WOW Tag — etiquetas editables para categorizar contactos, pendientes, etc.
   Diferente de Badge (estado de solo lectura) y de FilterChip (filtros de búsqueda). */

.wow-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: 2px var(--wow-space-2);
  height: 22px;
  background: var(--wow-surface-hover);
  color: var(--wow-text);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  line-height: 1;
  max-width: 200px;
  user-select: none;
}

.wow-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-text-muted);
  flex-shrink: 0;
}

.wow-tag__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wow-tag__remove {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  color: var(--wow-text-muted);
  cursor: pointer;
  border-radius: var(--wow-radius-full);
  padding: 0;
  margin-left: 2px;
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
}
.wow-tag__remove:hover {
  background: rgba(0, 0, 0, 0.25);
  color: var(--wow-text);
}
.wow-tag__remove > i[data-lucide], .wow-tag__remove > svg { width: 10px; height: 10px; }

/* Tamaños */
.wow-tag--sm { height: 18px; padding: 0 var(--wow-space-1); font-size: 10px; }
.wow-tag--sm .wow-tag__dot { width: 5px; height: 5px; }
.wow-tag--lg { height: 28px; padding: var(--wow-space-1) var(--wow-space-3); font-size: var(--wow-text-sm); }

/* Colores (coinciden con acentos y semánticos) */
.wow-tag--accent  { background: var(--wow-accent-soft);  color: var(--wow-accent);  border-color: transparent; }
.wow-tag--accent  .wow-tag__dot { background: var(--wow-accent); }

.wow-tag--success { background: var(--wow-success-soft); color: var(--wow-success); border-color: transparent; }
.wow-tag--success .wow-tag__dot { background: var(--wow-success); }

.wow-tag--warning { background: var(--wow-warning-soft); color: var(--wow-warning); border-color: transparent; }
.wow-tag--warning .wow-tag__dot { background: var(--wow-warning); }

.wow-tag--danger  { background: var(--wow-danger-soft);  color: var(--wow-danger);  border-color: transparent; }
.wow-tag--danger  .wow-tag__dot { background: var(--wow-danger); }

.wow-tag--info    { background: var(--wow-info-soft);    color: #818CF8;            border-color: transparent; }
.wow-tag--info    .wow-tag__dot { background: #818CF8; }

.wow-tag--purple  { background: rgba(168,85,247,0.14);  color: #C084FC; border-color: transparent; }
.wow-tag--purple  .wow-tag__dot { background: #C084FC; }

.wow-tag--pink    { background: rgba(236,72,153,0.14);  color: #F472B6; border-color: transparent; }
.wow-tag--pink    .wow-tag__dot { background: #F472B6; }

/* Sólido (pill completo) */
.wow-tag--solid {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  border-color: transparent;
}
.wow-tag--solid .wow-tag__remove:hover { background: rgba(255,255,255,0.2); color: var(--wow-text-inverse); }

/* Outline */
.wow-tag--outline {
  background: transparent;
  border-color: var(--wow-border-strong);
  color: var(--wow-text-muted);
}

/* Input con tags (componer varias) */
.wow-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wow-space-1);
  min-height: 36px;
  padding: 4px var(--wow-space-2);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-tag-input:focus-within {
  border-color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
}
.wow-tag-input__field {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  padding: 0 var(--wow-space-1);
  min-height: 24px;
}
.wow-tag-input__field::placeholder { color: var(--wow-text-subtle); }

/* Añadir (botón que abre sugerencias) */
.wow-tag-add {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: 0 var(--wow-space-2);
  height: 22px;
  background: transparent;
  color: var(--wow-text-muted);
  border: 1px dashed var(--wow-border-strong);
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
  transition: color var(--wow-transition-fast), border-color var(--wow-transition-fast);
}
.wow-tag-add:hover { color: var(--wow-accent); border-color: var(--wow-accent); border-style: solid; }
.wow-tag-add > i[data-lucide], .wow-tag-add > svg { width: 10px; height: 10px; }

/* --- components/avatar/avatar.css --- */
.wow-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-surface-hover);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.wow-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tamaños */
.wow-avatar--xs { width: 20px; height: 20px; font-size: var(--wow-text-xs); }
.wow-avatar--sm { width: 28px; height: 28px; font-size: var(--wow-text-xs); }
.wow-avatar--lg { width: 48px; height: 48px; font-size: var(--wow-text-base); }
.wow-avatar--xl { width: 64px; height: 64px; font-size: var(--wow-text-lg); }
.wow-avatar--2xl { width: 96px; height: 96px; font-size: var(--wow-text-2xl); }

/* Colores de iniciales (generadas por hash en runtime) */
.wow-avatar--c1 { background: rgba(56, 189, 248, 0.18); color: #38BDF8; }
.wow-avatar--c2 { background: rgba(16, 185, 129, 0.18); color: #10B981; }
.wow-avatar--c3 { background: rgba(245, 158, 11, 0.18); color: #F59E0B; }
.wow-avatar--c4 { background: rgba(239, 68, 68, 0.18); color: #EF4444; }
.wow-avatar--c5 { background: rgba(99, 102, 241, 0.18); color: #818CF8; }
.wow-avatar--c6 { background: rgba(236, 72, 153, 0.18); color: #F472B6; }

/* Status dot */
.wow-avatar__status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 25%;
  height: 25%;
  min-width: 8px;
  min-height: 8px;
  border-radius: var(--wow-radius-full);
  border: 2px solid var(--wow-bg);
  background: var(--wow-text-muted);
}
.wow-avatar__status--online  { background: var(--wow-success); }
.wow-avatar__status--busy    { background: var(--wow-danger); }
.wow-avatar__status--away    { background: var(--wow-warning); }
.wow-avatar__status--offline { background: var(--wow-text-subtle); }

/* Grupo apilado */
.wow-avatar-group {
  display: inline-flex;
  align-items: center;
}
.wow-avatar-group .wow-avatar {
  border: 2px solid var(--wow-bg);
}
.wow-avatar-group .wow-avatar + .wow-avatar {
  margin-left: -8px;
}
.wow-avatar-group__more {
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
}

/* --- components/card/card.css --- */
.wow-card {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
  transition: border-color var(--wow-transition-fast), background var(--wow-transition-fast);
}
.wow-card--hoverable { cursor: pointer; }
.wow-card--hoverable:hover { border-color: var(--wow-border-strong); background: var(--wow-surface-hover); }

.wow-card__header {
  padding: var(--wow-space-4) var(--wow-space-5);
  border-bottom: 1px solid var(--wow-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--wow-space-3);
}
.wow-card__title {
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}
.wow-card__subtitle {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  margin-top: 2px;
}
.wow-card__body   { padding: var(--wow-space-5); }
.wow-card__footer {
  padding: var(--wow-space-4) var(--wow-space-5);
  border-top: 1px solid var(--wow-border);
  display: flex; justify-content: flex-end; gap: var(--wow-space-2);
  background: var(--wow-bg-elevated);
}

/* Stat card — KPI style */
.wow-stat {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  padding: var(--wow-space-5);
}
.wow-stat__label {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--wow-weight-medium);
}
.wow-stat__value {
  font-size: var(--wow-text-3xl);
  font-weight: var(--wow-weight-bold);
  color: var(--wow-text-strong);
  margin-top: var(--wow-space-2);
  line-height: 1.1;
}
.wow-stat__delta {
  margin-top: var(--wow-space-2);
  font-size: var(--wow-text-xs);
  display: inline-flex; align-items: center; gap: 4px;
}
.wow-stat__delta--up   { color: var(--wow-success); }
.wow-stat__delta--down { color: var(--wow-danger); }
.wow-stat__delta svg, .wow-stat__delta i { width: 12px; height: 12px; }

/* --- components/table/table.css --- */
.wow-table-wrap {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
}
.wow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wow-text-sm);
}
.wow-table thead th {
  text-align: left;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  color: var(--wow-text-muted);
  font-weight: var(--wow-weight-medium);
  font-size: var(--wow-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--wow-border);
  white-space: nowrap;
}
.wow-table tbody td {
  padding: var(--wow-space-3) var(--wow-space-4);
  color: var(--wow-text);
  border-bottom: 1px solid var(--wow-border);
  vertical-align: middle;
}
.wow-table tbody tr:last-child td { border-bottom: none; }
.wow-table tbody tr { transition: background var(--wow-transition-fast); }
.wow-table tbody tr:hover { background: var(--wow-surface-hover); }
.wow-table__muted { color: var(--wow-text-muted); }
.wow-table__num { font-family: var(--wow-font-mono); font-variant-numeric: tabular-nums; }
.wow-table__actions { text-align: right; white-space: nowrap; }

/* ----------------------------------------------------------------
   DataTable: toolbar, sort, selección, filtros de columna, paginación
   ---------------------------------------------------------------- */
.wow-datatable__toolbar {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  border-bottom: 1px solid var(--wow-border);
  flex-wrap: wrap;
}
.wow-datatable__toolbar-left { display: flex; align-items: center; gap: var(--wow-space-2); flex: 1; min-width: 200px; }
.wow-datatable__toolbar-right { display: flex; align-items: center; gap: var(--wow-space-2); }

.wow-datatable__title {
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  font-size: var(--wow-text-base);
}
.wow-datatable__subtitle {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}

/* Sort icon en th */
.wow-table th.wow-th--sortable {
  cursor: pointer;
  user-select: none;
}
.wow-table th.wow-th--sortable:hover { color: var(--wow-text); }
.wow-th__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
}
.wow-th__sort {
  display: inline-grid;
  place-items: center;
  color: var(--wow-text-subtle);
  opacity: 0.6;
}
.wow-th--sort-asc .wow-th__sort,
.wow-th--sort-desc .wow-th__sort {
  opacity: 1;
  color: var(--wow-accent);
}
.wow-th__sort > i[data-lucide], .wow-th__sort > svg { width: 12px; height: 12px; }

/* Column filter input bajo el header */
.wow-table thead tr.wow-datatable__filter-row th {
  padding: var(--wow-space-2) var(--wow-space-3);
  background: var(--wow-surface);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-regular);
}
.wow-datatable__col-filter {
  width: 100%;
  height: 28px;
  padding: 0 var(--wow-space-2);
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  outline: none;
}
.wow-datatable__col-filter::placeholder { color: var(--wow-text-subtle); }
.wow-datatable__col-filter:focus { border-color: var(--wow-accent); box-shadow: var(--wow-shadow-glow); }

/* Checkbox selección */
.wow-datatable__check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-sm);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  vertical-align: middle;
  color: transparent;
  transition: background var(--wow-transition-fast), border-color var(--wow-transition-fast);
}
.wow-datatable__check > i[data-lucide], .wow-datatable__check > svg { width: 12px; height: 12px; }
.wow-table tr.wow-datatable__row--selected td { background: var(--wow-accent-soft); }
.wow-table tr.wow-datatable__row--selected .wow-datatable__check,
.wow-datatable__check--on {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
  color: var(--wow-text-inverse);
}

/* Paginación */
.wow-datatable__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  border-top: 1px solid var(--wow-border);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  flex-wrap: wrap;
  gap: var(--wow-space-3);
}


.wow-datatable__page-size {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
}
.wow-datatable__page-size select {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text);
  padding: 2px var(--wow-space-2);
  font-size: var(--wow-text-xs);
  font-family: var(--wow-font-sans);
}

/* Bulk-actions bar */
.wow-datatable__bulk {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-accent-soft);
  border-bottom: 1px solid var(--wow-border);
  color: var(--wow-accent);
  font-size: var(--wow-text-sm);
}
.wow-datatable__bulk-actions { margin-left: auto; display: flex; gap: var(--wow-space-2); }

/* ----------------------------------------------------------------
   Editable table — celdas inline editables + añadir fila
   ---------------------------------------------------------------- */
.wow-editable {
  /* mismas reglas visuales que wow-table (se usa junto) */
}

.wow-editable__cell {
  position: relative;
  padding: 0 !important;
}
.wow-editable__cell input,
.wow-editable__cell select,
.wow-editable__cell textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--wow-space-2) var(--wow-space-3);
  background: transparent;
  color: var(--wow-text);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  outline: none;
  transition: background var(--wow-transition-fast), border-color var(--wow-transition-fast);
}
.wow-editable__cell input:hover,
.wow-editable__cell select:hover,
.wow-editable__cell textarea:hover {
  background: var(--wow-surface-hover);
}
.wow-editable__cell input:focus,
.wow-editable__cell select:focus,
.wow-editable__cell textarea:focus {
  background: var(--wow-bg);
  border-color: var(--wow-accent);
  box-shadow: inset 0 0 0 1px var(--wow-accent);
  z-index: 2;
}
.wow-editable__cell--num input {
  font-family: var(--wow-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.wow-editable__cell--error input,
.wow-editable__cell--error select { box-shadow: inset 0 0 0 1px var(--wow-danger); background: var(--wow-danger-soft); }

/* Fila en edición */
.wow-editable__row--editing td { background: var(--wow-accent-soft) !important; }
.wow-editable__row--new td { background: rgba(56,189,248,0.06); }
.wow-editable__row--new .wow-editable__cell input::placeholder { color: var(--wow-text-subtle); font-style: italic; }

/* Fila de acciones (guardar/cancelar/eliminar) */
.wow-editable__row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding: 0 var(--wow-space-2);
  opacity: 0;
  transition: opacity var(--wow-transition-fast);
}
.wow-table tr:hover .wow-editable__row-actions,
.wow-editable__row--editing .wow-editable__row-actions,
.wow-editable__row--new .wow-editable__row-actions {
  opacity: 1;
}

/* Fila "+ Añadir" al final */
.wow-editable__add-row {
  padding: var(--wow-space-3) var(--wow-space-4);
  border-top: 1px solid var(--wow-border);
  background: var(--wow-bg-elevated);
}
.wow-editable__add-row button {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  background: transparent;
  border: 1px dashed var(--wow-border-strong);
  color: var(--wow-text-muted);
  padding: var(--wow-space-2) var(--wow-space-4);
  border-radius: var(--wow-radius-md);
  cursor: pointer;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  transition: color var(--wow-transition-fast), border-color var(--wow-transition-fast), background var(--wow-transition-fast);
  width: 100%;
  justify-content: center;
}
.wow-editable__add-row button:hover {
  color: var(--wow-accent);
  border-color: var(--wow-accent);
  border-style: solid;
  background: var(--wow-accent-soft);
}
.wow-editable__add-row button > i[data-lucide],
.wow-editable__add-row button > svg { width: 14px; height: 14px; }

/* Indicador de cambios no guardados */
.wow-editable__dirty::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--wow-warning);
  border-radius: var(--wow-radius-full);
}

/* --- components/pagination/pagination.css --- */
/* Pagination — navegación de páginas */

.wow-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
}

.wow-pagination__btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text);
  cursor: pointer;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
}

.wow-pagination__btn:hover:not(:disabled) {
  background: var(--wow-surface-hover);
  border-color: var(--wow-border-strong);
}

.wow-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wow-pagination__btn--active {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
  color: var(--wow-text-inverse);
}

.wow-pagination__btn > i[data-lucide],
.wow-pagination__btn > svg {
  width: 14px;
  height: 14px;
}

.wow-pagination__ellipsis {
  padding: 0 var(--wow-space-1);
  color: var(--wow-text-subtle);
}

/* --- components/grid/grid.css --- */
/* WOW Grid — utilidades de rejilla responsive
   Úsalo para listados de cards, dashboards de KPIs, o composición libre. */

.wow-grid {
  display: grid;
  gap: var(--wow-space-4);
}

.wow-grid--gap-sm { gap: var(--wow-space-2); }
.wow-grid--gap-md { gap: var(--wow-space-4); }
.wow-grid--gap-lg { gap: var(--wow-space-6); }

/* Columnas fijas */
.wow-grid--1 { grid-template-columns: 1fr; }
.wow-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wow-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wow-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wow-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit: se adapta al ancho disponible */
.wow-grid--auto       { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wow-grid--auto-sm    { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wow-grid--auto-lg    { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Responsive collapse */
@media (max-width: 960px) {
  .wow-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wow-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .wow-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wow-grid--2, .wow-grid--3, .wow-grid--4, .wow-grid--6 { grid-template-columns: 1fr; }
}

/* Celda con span */
.wow-grid__cell--span-2 { grid-column: span 2; }
.wow-grid__cell--span-3 { grid-column: span 3; }
.wow-grid__cell--span-4 { grid-column: span 4; }
.wow-grid__cell--span-full { grid-column: 1 / -1; }

.wow-grid__cell--rowspan-2 { grid-row: span 2; }

/* Layout de aplicación completo (header + sidebar + content) */
.wow-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100%;
  min-height: 100vh;
  background: var(--wow-bg);
}
.wow-layout__sidebar { grid-area: sidebar; }
.wow-layout__header {
  grid-area: header;
  height: var(--wow-header-h);
  padding: 0 var(--wow-space-5);
  background: var(--wow-bg-elevated);
  border-bottom: 1px solid var(--wow-border);
  display: flex;
  align-items: center;
  gap: var(--wow-space-4);
}
.wow-layout__main {
  grid-area: main;
  padding: var(--wow-space-6);
  overflow-y: auto;
}

/* Split horizontal con proporción */
.wow-split {
  display: grid;
  gap: var(--wow-space-4);
  grid-template-columns: 1fr 2fr;
}
.wow-split--equal    { grid-template-columns: 1fr 1fr; }
.wow-split--30-70    { grid-template-columns: 30% 1fr; }
.wow-split--narrow   { grid-template-columns: 280px 1fr; }

@media (max-width: 900px) {
  .wow-split, .wow-split--equal, .wow-split--30-70, .wow-split--narrow {
    grid-template-columns: 1fr;
  }
}


/* --- components/currency/currency.css --- */
/* Currency — display de montos monetarios */

.wow-currency {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--wow-space-1);
  font-family: var(--wow-font-sans);
  color: var(--wow-text-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-left: auto;
}

.wow-currency__symbol {
  font-size: 0.75em;
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-muted);
}

.wow-currency__integer {
  font-weight: var(--wow-weight-bold);
}

.wow-currency__decimal {
  font-size: 0.75em;
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-muted);
}

.wow-currency__code {
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-subtle);
  text-transform: uppercase;
  margin-left: var(--wow-space-1);
}

/* Tamaños */
.wow-currency--sm { font-size: var(--wow-text-sm); }
.wow-currency--md { font-size: var(--wow-text-xl); }
.wow-currency--lg { font-size: var(--wow-text-3xl); }
.wow-currency--xl { font-size: var(--wow-text-4xl); }

/* Variantes semánticas */
.wow-currency--positive { color: var(--wow-success); }
.wow-currency--positive .wow-currency__symbol,
.wow-currency--positive .wow-currency__decimal { color: var(--wow-success); opacity: 0.7; }

.wow-currency--negative { color: var(--wow-danger); }
.wow-currency--negative .wow-currency__symbol,
.wow-currency--negative .wow-currency__decimal { color: var(--wow-danger); opacity: 0.7; }

/* Badge de moneda */
.wow-currency-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: var(--wow-space-1) var(--wow-space-2);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-muted);
}

.wow-currency-badge__flag {
  font-size: var(--wow-text-base);
  line-height: 1;
}

.wow-currency-badge--active {
  border-color: var(--wow-accent);
  color: var(--wow-accent);
  background: var(--wow-accent-soft);
}

/* --- components/pricing/pricing.css --- */
/* Pricing — planes de suscripción */

.wow-pricing {
  display: grid;
  gap: var(--wow-space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wow-pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-xl);
  padding: var(--wow-space-6);
  transition: border-color var(--wow-transition-base), box-shadow var(--wow-transition-base);
}

.wow-pricing-card:hover {
  border-color: var(--wow-border-strong);
}

.wow-pricing-card--featured {
  border-color: var(--wow-accent);
  box-shadow: 0 0 0 1px var(--wow-accent), var(--wow-shadow-lg);
  position: relative;
}

.wow-pricing-card__popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  padding: var(--wow-space-1) var(--wow-space-3);
  border-radius: var(--wow-radius-full);
  white-space: nowrap;
}

.wow-pricing-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--wow-radius-lg);
  margin-bottom: var(--wow-space-4);
}

.wow-pricing-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--wow-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-lg);
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
}

.wow-pricing-card__icon--success { background: var(--wow-success-soft); color: var(--wow-success); }
.wow-pricing-card__icon--warning { background: var(--wow-warning-soft); color: var(--wow-warning); }
.wow-pricing-card__icon--info    { background: var(--wow-info-soft);    color: var(--wow-info); }

.wow-pricing-card__header {
  text-align: center;
  margin-bottom: var(--wow-space-5);
}

.wow-pricing-card__name {
  font-size: var(--wow-text-lg);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  margin: 0 0 var(--wow-space-1);
}

.wow-pricing-card__desc {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
  margin: 0;
}

.wow-pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--wow-space-1);
  margin: var(--wow-space-4) 0;
}

.wow-pricing-card__amount {
  font-size: var(--wow-text-4xl);
  font-weight: var(--wow-weight-bold);
  color: var(--wow-text-strong);
  font-variant-numeric: tabular-nums;
}

.wow-pricing-card__period {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
}

.wow-pricing-card__currency {
  font-size: var(--wow-text-lg);
  color: var(--wow-text-muted);
  font-weight: var(--wow-weight-medium);
}

.wow-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3);
  flex: 1;
  margin-bottom: var(--wow-space-6);
}

.wow-pricing-card__feature {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  font-size: var(--wow-text-sm);
  color: var(--wow-text);
}

.wow-pricing-card__feature i,
.wow-pricing-card__feature svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--wow-success);
}

.wow-pricing-card__feature--disabled {
  color: var(--wow-text-subtle);
  text-decoration: line-through;
}

.wow-pricing-card__feature--disabled i,
.wow-pricing-card__feature--disabled svg {
  color: var(--wow-text-subtle);
}

.wow-pricing-card__cta {
  margin-top: auto;
}

/* Toggle anual/mensual */
.wow-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wow-space-3);
  margin-bottom: var(--wow-space-6);
}

.wow-pricing-toggle__label {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
}

.wow-pricing-toggle__label--active {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-medium);
}

.wow-pricing-toggle__save {
  font-size: var(--wow-text-xs);
  color: var(--wow-success);
  font-weight: var(--wow-weight-medium);
  background: var(--wow-success-soft);
  padding: 2px var(--wow-space-2);
  border-radius: var(--wow-radius-full);
}

/* ==========================================
   Navigation
   ========================================== */

/* --- components/tabs/tabs.css --- */
.wow-tabs {
  display: flex;
  gap: var(--wow-space-1);
  border-bottom: 1px solid var(--wow-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.wow-tabs::-webkit-scrollbar { display: none; }

.wow-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: transparent;
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--wow-transition-fast), border-color var(--wow-transition-fast);
}
.wow-tab:hover:not(:disabled) { color: var(--wow-text); }
.wow-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.wow-tab--active {
  color: var(--wow-accent);
  border-bottom-color: var(--wow-accent);
}

.wow-tab > i[data-lucide], .wow-tab > svg { width: 16px; height: 16px; flex-shrink: 0; }

.wow-tab__badge {
  margin-left: var(--wow-space-1);
  padding: 0 var(--wow-space-2);
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  border-radius: var(--wow-radius-full);
}
.wow-tab--active .wow-tab__badge {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
}

/* Variante pill */
.wow-tabs--pill {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  padding: var(--wow-space-1);
  gap: 0;
}
.wow-tabs--pill .wow-tab {
  border-bottom: none;
  border-radius: var(--wow-radius-md);
  margin-bottom: 0;
  padding: var(--wow-space-2) var(--wow-space-4);
}
.wow-tabs--pill .wow-tab--active {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-tabs--pill .wow-tab--active .wow-tab__badge {
  background: rgba(11, 15, 26, 0.2);
  color: var(--wow-text-inverse);
}

/* Panel */
.wow-tab-panel { padding: var(--wow-space-5) 0; color: var(--wow-text); }

/* --- components/sidebar/sidebar.css --- */
/* =========================================================
   WOW Sidebar — navegación lateral
   Variantes:
     .wow-sidebar                          (expandido, default)
     .wow-sidebar--collapsed               (solo iconos, 64 px)
     .wow-sidebar--drawer                  (overlay móvil)
     .wow-sidebar--drawer.wow-sidebar--open (abierto en móvil)
   ========================================================= */

.wow-sidebar {
  width: var(--wow-sidebar-w);
  background: var(--wow-bg-elevated);
  border-right: 1px solid var(--wow-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width var(--wow-transition-base);
  overflow: hidden;
  position: relative;
}

.wow-sidebar--collapsed { width: 64px; }

/* ---------- Brand / header ---------- */
.wow-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: 0 var(--wow-space-3);
  height: var(--wow-header-h);
  border-bottom: 1px solid var(--wow-border);
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}
.wow-sidebar--collapsed .wow-sidebar__brand {
  padding: 0;
  justify-content: center;
  flex-direction: column;
  gap: var(--wow-space-1);
  height: auto;
  padding-top: var(--wow-space-3);
  padding-bottom: var(--wow-space-2);
}

.wow-sidebar__brand-logo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  border-radius: var(--wow-radius-md);
  flex-shrink: 0;
  font-weight: var(--wow-weight-bold);
}
.wow-sidebar__brand-name { overflow: hidden; text-overflow: ellipsis; font-size: var(--wow-text-base); }
.wow-sidebar--collapsed .wow-sidebar__brand-name { display: none; }

/* Acciones del header (campana, buscar, colapsar) */
.wow-sidebar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.wow-sidebar--collapsed .wow-sidebar__actions {
  margin-left: 0;
  flex-direction: column;
  gap: 4px;
}

.wow-sidebar__action {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--wow-transition-fast), background var(--wow-transition-fast);
}
.wow-sidebar__action:hover { color: var(--wow-text); background: var(--wow-surface-hover); }
.wow-sidebar__action > i[data-lucide], .wow-sidebar__action > svg { width: 16px; height: 16px; }
.wow-sidebar__action-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-danger);
  border: 2px solid var(--wow-bg-elevated);
}
.wow-sidebar__action-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--wow-danger);
  color: #fff;
  border-radius: var(--wow-radius-full);
  border: 2px solid var(--wow-bg-elevated);
  font-size: 9px;
  font-weight: var(--wow-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ---------- Search (Cmd+K) ---------- */
.wow-sidebar__search {
  padding: var(--wow-space-3);
  border-bottom: 1px solid var(--wow-border);
  flex-shrink: 0;
}
.wow-sidebar__search .wow-search { max-width: 100%; }
.wow-sidebar--collapsed .wow-sidebar__search { padding: var(--wow-space-2); }
.wow-sidebar--collapsed .wow-sidebar__search .wow-search {
  width: 40px;
}
.wow-sidebar--collapsed .wow-sidebar__search .wow-search__input {
  padding: 0;
  width: 40px;
  height: 36px;
  text-indent: -9999px;
  cursor: pointer;
}
.wow-sidebar--collapsed .wow-sidebar__search .wow-search__icon { left: 50%; transform: translate(-50%, -50%); }
.wow-sidebar--collapsed .wow-sidebar__search .wow-search__shortcut,
.wow-sidebar--collapsed .wow-sidebar__search .wow-search__clear { display: none; }

/* ---------- Nav ---------- */
.wow-sidebar__nav {
  flex: 1;
  padding: var(--wow-space-3) var(--wow-space-2);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Scrollbar estilizado */
.wow-sidebar__nav::-webkit-scrollbar { width: 6px; }
.wow-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.wow-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--wow-border-strong);
  border-radius: var(--wow-radius-full);
}
.wow-sidebar__nav::-webkit-scrollbar-thumb:hover { background: var(--wow-text-subtle); }
.wow-sidebar__nav { scrollbar-width: thin; scrollbar-color: var(--wow-border-strong) transparent; }

/* ---------- Grupos (colapsables) ---------- */
.wow-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--wow-space-2);
}
.wow-sidebar__group:first-child { margin-top: 0; }

.wow-sidebar__group-header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-1) var(--wow-space-3);
  background: transparent;
  border: none;
  color: var(--wow-text-subtle);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: var(--wow-radius-sm);
  user-select: none;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}
.wow-sidebar__group-header:hover { color: var(--wow-text-muted); }
.wow-sidebar__group-header > i[data-lucide], .wow-sidebar__group-header > svg {
  width: 12px;
  height: 12px;
  transition: transform var(--wow-transition-fast);
  margin-left: auto;
}
.wow-sidebar__group--collapsed .wow-sidebar__group-header > i[data-lucide],
.wow-sidebar__group--collapsed .wow-sidebar__group-header > svg {
  transform: rotate(-90deg);
}

.wow-sidebar__group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 1000px;
  transition: max-height var(--wow-transition-base);
}
.wow-sidebar__group--collapsed .wow-sidebar__group-items {
  max-height: 0;
}

.wow-sidebar--collapsed .wow-sidebar__group-header { display: none; }
.wow-sidebar--collapsed .wow-sidebar__group-items { max-height: none !important; }

/* Separador entre grupos cuando está colapsado: solo una línea sutil */
.wow-sidebar--collapsed .wow-sidebar__group {
  margin-top: 0;
  position: relative;
}
.wow-sidebar--collapsed .wow-sidebar__group + .wow-sidebar__group::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--wow-border);
  margin: var(--wow-space-2) var(--wow-space-2);
}

/* ---------- Items ---------- */
.wow-sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-2) var(--wow-space-3);
  color: var(--wow-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
  text-decoration: none;
}
.wow-sidebar__item > i[data-lucide], .wow-sidebar__item > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.wow-sidebar__item:hover { background: var(--wow-surface-hover); color: var(--wow-text); }

.wow-sidebar__item--active {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  font-weight: var(--wow-weight-medium);
}
/* Barra lateral izquierda como indicador */
.wow-sidebar__item--active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-accent);
}

.wow-sidebar__item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.wow-sidebar__item-badge {
  padding: 0 var(--wow-space-2);
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  border-radius: var(--wow-radius-full);
  flex-shrink: 0;
}
.wow-sidebar__item--active .wow-sidebar__item-badge {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-sidebar__item-badge--danger { background: var(--wow-danger); color: #fff; }

/* ---------- Items con submenu ---------- */
.wow-sidebar__item--has-submenu { padding-right: var(--wow-space-2); }

.wow-sidebar__item-chevron {
  margin-left: auto;
  color: var(--wow-text-subtle);
  transition: transform var(--wow-transition-fast);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.wow-sidebar__item-chevron > i[data-lucide],
.wow-sidebar__item-chevron > svg { width: 14px; height: 14px; }
.wow-sidebar__item--open .wow-sidebar__item-chevron { transform: rotate(90deg); color: var(--wow-accent); }

.wow-sidebar__submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 0;
  margin-left: var(--wow-space-4);
  padding-left: var(--wow-space-3);
  border-left: 1px solid var(--wow-border);
  transition: max-height var(--wow-transition-base);
}
.wow-sidebar__item--open + .wow-sidebar__submenu {
  max-height: 600px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.wow-sidebar__submenu .wow-sidebar__item {
  padding: var(--wow-space-1) var(--wow-space-3);
  font-size: var(--wow-text-sm);
}
.wow-sidebar__submenu .wow-sidebar__item--active::before { left: -12px; }

.wow-sidebar__item--open:not(.wow-sidebar__item--active) {
  color: var(--wow-text);
}

/* Colapsado: ocultar chevron y submenus (quedan solo los iconos principales) */
.wow-sidebar--collapsed .wow-sidebar__item-chevron,
.wow-sidebar--collapsed .wow-sidebar__submenu {
  display: none;
}

/* ---------- Colapsado: iconos centrados + tooltip ---------- */
.wow-sidebar--collapsed .wow-sidebar__nav { padding: var(--wow-space-2); }

.wow-sidebar--collapsed .wow-sidebar__item-label,
.wow-sidebar--collapsed .wow-sidebar__item-badge {
  display: none;
}
.wow-sidebar--collapsed .wow-sidebar__item {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.wow-sidebar--collapsed .wow-sidebar__item--active {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-sidebar--collapsed .wow-sidebar__item--active::before {
  display: none;
}

/* Tooltip (sólo visible cuando colapsado) */
.wow-sidebar__item-tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--wow-text-strong);
  color: var(--wow-bg);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  padding: var(--wow-space-1) var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: var(--wow-z-tooltip);
  transition: opacity var(--wow-transition-fast), transform var(--wow-transition-fast);
  box-shadow: var(--wow-shadow-md);
  display: none;
}
.wow-sidebar__item-tip::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  background: var(--wow-text-strong);
  transform: rotate(45deg);
}
.wow-sidebar--collapsed .wow-sidebar__item-tip { display: block; }
.wow-sidebar--collapsed .wow-sidebar__item:hover .wow-sidebar__item-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Dot pequeño en la esquina del icono cuando hay badge y estamos colapsados */
.wow-sidebar--collapsed .wow-sidebar__item[data-has-badge="true"]::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-danger);
  border: 2px solid var(--wow-bg-elevated);
}

/* ---------- Footer (usuario) ---------- */
.wow-sidebar__footer {
  border-top: 1px solid var(--wow-border);
  padding: var(--wow-space-2);
  flex-shrink: 0;
  position: relative;
}

.wow-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-2);
  background: transparent;
  border: none;
  border-radius: var(--wow-radius-md);
  width: 100%;
  cursor: pointer;
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  text-align: left;
  transition: background var(--wow-transition-fast);
}
.wow-sidebar__user:hover { background: var(--wow-surface-hover); }

.wow-sidebar__user-info {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wow-sidebar__user-name {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wow-text-sm);
}
.wow-sidebar__user-mail {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wow-sidebar__user-more {
  color: var(--wow-text-subtle);
  flex-shrink: 0;
}
.wow-sidebar__user-more > i[data-lucide], .wow-sidebar__user-more > svg { width: 14px; height: 14px; }

.wow-sidebar--collapsed .wow-sidebar__user { justify-content: center; }
.wow-sidebar--collapsed .wow-sidebar__user-info,
.wow-sidebar--collapsed .wow-sidebar__user-more { display: none; }

/* Menú que sube desde el footer */
.wow-sidebar__user-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: var(--wow-space-2);
  right: var(--wow-space-2);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-lg);
  padding: var(--wow-space-1);
  display: none;
  z-index: var(--wow-z-dropdown);
}
.wow-sidebar__footer--open .wow-sidebar__user-menu { display: block; }

.wow-sidebar--collapsed .wow-sidebar__user-menu {
  left: calc(100% + 8px);
  right: auto;
  bottom: var(--wow-space-2);
  width: 220px;
}


/* ---------- Drawer (móvil) ---------- */
.wow-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: calc(var(--wow-z-overlay) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wow-transition-base);
}
.wow-sidebar-backdrop--open { opacity: 1; pointer-events: auto; }

.wow-sidebar--drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--wow-z-overlay);
  transform: translateX(-100%);
  transition: transform var(--wow-transition-base);
  box-shadow: var(--wow-shadow-xl);
}
.wow-sidebar--drawer.wow-sidebar--open {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .wow-sidebar:not(.wow-sidebar--drawer) { display: none; }
}

/* --- components/breadcrumbs/breadcrumbs.css --- */
.wow-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wow-text-sm);
  flex-wrap: wrap;
}

.wow-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  color: var(--wow-text-muted);
}
.wow-breadcrumbs__item > i[data-lucide], .wow-breadcrumbs__item > svg { width: 14px; height: 14px; }

.wow-breadcrumbs__link {
  color: var(--wow-text-muted);
  text-decoration: none;
  padding: var(--wow-space-1) var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
}
.wow-breadcrumbs__link:hover { color: var(--wow-text); background: var(--wow-surface-hover); }

.wow-breadcrumbs__sep {
  color: var(--wow-text-subtle);
  display: inline-grid;
  place-items: center;
}
.wow-breadcrumbs__sep > i[data-lucide], .wow-breadcrumbs__sep > svg { width: 12px; height: 12px; }

.wow-breadcrumbs__current {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-medium);
  padding: var(--wow-space-1) var(--wow-space-2);
}

.wow-breadcrumbs__ellipsis {
  color: var(--wow-text-subtle);
  padding: 0 var(--wow-space-1);
  cursor: pointer;
}
.wow-breadcrumbs__ellipsis:hover { color: var(--wow-text); }

/* --- components/filters/filters.css --- */
.wow-filters {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  flex-wrap: wrap;
  padding: var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
}

.wow-filters__label {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  padding-right: var(--wow-space-2);
  border-right: 1px solid var(--wow-border);
  margin-right: var(--wow-space-1);
}
.wow-filters__label > i[data-lucide], .wow-filters__label > svg { width: 14px; height: 14px; }

/* Botón para agregar filtro */
.wow-filter-add {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: var(--wow-space-1) var(--wow-space-3);
  height: 28px;
  background: transparent;
  border: 1px dashed var(--wow-border-strong);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
  transition: border-color var(--wow-transition-fast), color var(--wow-transition-fast);
}
.wow-filter-add:hover { border-color: var(--wow-accent); color: var(--wow-accent); border-style: solid; }
.wow-filter-add > i[data-lucide], .wow-filter-add > svg { width: 12px; height: 12px; }

/* Chip de filtro activo */
.wow-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-1) var(--wow-space-1) var(--wow-space-1) var(--wow-space-3);
  height: 28px;
  background: var(--wow-accent-soft);
  border: 1px solid transparent;
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
}
.wow-filter-chip__key { color: var(--wow-text-muted); }
.wow-filter-chip__op  { color: var(--wow-text-subtle); margin: 0 2px; }
.wow-filter-chip__val { color: var(--wow-accent); font-weight: var(--wow-weight-medium); }

.wow-filter-chip__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  color: var(--wow-text-muted);
  cursor: pointer;
  border-radius: var(--wow-radius-sm);
}
.wow-filter-chip__remove:hover { background: rgba(56, 189, 248, 0.2); color: var(--wow-accent); }
.wow-filter-chip__remove > i[data-lucide], .wow-filter-chip__remove > svg { width: 12px; height: 12px; }

/* Clear all */
.wow-filters__clear {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  background: transparent;
  border: none;
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  cursor: pointer;
  padding: var(--wow-space-1) var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
}
.wow-filters__clear:hover { color: var(--wow-danger); background: var(--wow-surface-hover); }
.wow-filters__clear > i[data-lucide], .wow-filters__clear > svg { width: 12px; height: 12px; }

.wow-filters__count {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  padding: 0 var(--wow-space-2);
}

/* Variante compacta (sin fondo) */
.wow-filters--compact {
  background: transparent;
  border: none;
  padding: 0;
}

/* --- components/menu/menu.css --- */
/* =========================================================
   WOW Menu — menús jerárquicos con submenús
   Tres modos:
     .wow-menu                  Vertical con accordion (expandir inline)
     .wow-menu--cascade         Submenú lateral al hover/click
     .wow-menu--command         Tipo command palette (compacto)
   ========================================================= */

.wow-menu {
  width: 260px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  padding: var(--wow-space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
}

/* ---------- Grupos ---------- */
.wow-menu__group-label {
  padding: var(--wow-space-2) var(--wow-space-3) var(--wow-space-1);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wow-menu__divider {
  height: 1px;
  background: var(--wow-border);
  margin: var(--wow-space-1) 0;
}

/* ---------- Items ---------- */
.wow-menu__item {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  width: 100%;
  padding: var(--wow-space-2) var(--wow-space-3);
  background: transparent;
  border: none;
  color: var(--wow-text);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--wow-radius-sm);
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
  position: relative;
}
.wow-menu__item:hover:not(:disabled) { background: var(--wow-surface-hover); }
.wow-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }

.wow-menu__item > i[data-lucide]:first-child,
.wow-menu__item > svg:first-child {
  width: 16px;
  height: 16px;
  color: var(--wow-text-muted);
  flex-shrink: 0;
}
.wow-menu__item--active {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  font-weight: var(--wow-weight-medium);
}
.wow-menu__item--active > i[data-lucide]:first-child,
.wow-menu__item--active > svg:first-child {
  color: var(--wow-accent);
}

.wow-menu__item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.wow-menu__item-badge {
  padding: 0 var(--wow-space-2);
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  border-radius: var(--wow-radius-full);
  flex-shrink: 0;
}
.wow-menu__item--active .wow-menu__item-badge { background: var(--wow-accent); color: var(--wow-text-inverse); }

.wow-menu__item-shortcut {
  margin-left: auto;
  color: var(--wow-text-subtle);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  flex-shrink: 0;
}

/* ---------- Item danger ---------- */
.wow-menu__item--danger { color: var(--wow-danger); }
.wow-menu__item--danger > i[data-lucide]:first-child,
.wow-menu__item--danger > svg:first-child { color: var(--wow-danger); }
.wow-menu__item--danger:hover { background: var(--wow-danger-soft); }

/* ---------- Item con submenu (chevron a la derecha) ---------- */
.wow-menu__item--has-submenu {
  padding-right: var(--wow-space-2);
}
.wow-menu__chevron {
  margin-left: auto;
  color: var(--wow-text-subtle);
  transition: transform var(--wow-transition-fast);
  flex-shrink: 0;
}
.wow-menu__chevron > i[data-lucide], .wow-menu__chevron > svg { width: 14px; height: 14px; }

/* ---------- Submenu (accordion inline) ---------- */
.wow-menu__submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--wow-transition-base);
  padding-left: var(--wow-space-3);
  margin-left: var(--wow-space-4);
  border-left: 1px solid var(--wow-border);
  margin-top: 2px;
}
.wow-menu__item--open + .wow-menu__submenu { max-height: 600px; padding-top: 2px; padding-bottom: 2px; }
.wow-menu__item--open .wow-menu__chevron { transform: rotate(90deg); }

.wow-menu__submenu .wow-menu__item {
  padding: var(--wow-space-2) var(--wow-space-3);
  font-size: var(--wow-text-sm);
}

/* Sub-sub nivel (3ro): más indent */
.wow-menu__submenu .wow-menu__submenu {
  margin-left: var(--wow-space-3);
}

/* ---------- Modo cascade (submenú lateral) ---------- */
.wow-menu--cascade .wow-menu__submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  max-height: none;
  padding: var(--wow-space-1);
  margin: 0 0 0 var(--wow-space-1);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  background: var(--wow-surface);
  box-shadow: var(--wow-shadow-lg);
  min-width: 220px;
  z-index: calc(var(--wow-z-dropdown) + 1);
  overflow: visible;
}
.wow-menu--cascade .wow-menu__item--open + .wow-menu__submenu,
.wow-menu--cascade .wow-menu__item-wrap:hover .wow-menu__submenu {
  display: flex;
  flex-direction: column;
}
.wow-menu--cascade .wow-menu__item-wrap { position: relative; }

/* ---------- Modo command (compacto con atajos) ---------- */
.wow-menu--command {
  width: 360px;
  padding: 0;
}
.wow-menu--command .wow-menu__search {
  padding: var(--wow-space-3);
  border-bottom: 1px solid var(--wow-border);
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
}
.wow-menu--command .wow-menu__search > i[data-lucide], .wow-menu--command .wow-menu__search > svg {
  width: 14px; height: 14px; color: var(--wow-text-subtle);
}
.wow-menu--command .wow-menu__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wow-text);
  font-family: inherit;
  font-size: var(--wow-text-sm);
}
.wow-menu--command .wow-menu__search input::placeholder { color: var(--wow-text-subtle); }
.wow-menu--command .wow-menu__body {
  padding: var(--wow-space-1);
  max-height: 320px;
  overflow-y: auto;
}
.wow-menu--command .wow-menu__footer {
  padding: var(--wow-space-2) var(--wow-space-3);
  border-top: 1px solid var(--wow-border);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  display: flex;
  gap: var(--wow-space-3);
}

/* --- components/dropdown/dropdown.css --- */
.wow-dropdown {
  position: relative;
  display: inline-block;
}

.wow-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-lg);
  padding: var(--wow-space-1);
  z-index: var(--wow-z-dropdown);
  display: none;
}
.wow-dropdown--open .wow-dropdown__menu { display: block; }

.wow-dropdown__menu--right { right: 0; }

.wow-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  width: 100%;
  padding: var(--wow-space-2) var(--wow-space-3);
  background: transparent;
  border: none;
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--wow-radius-sm);
  text-decoration: none;
  transition: background var(--wow-transition-fast);
}
.wow-dropdown__item:hover:not(:disabled):not(.wow-dropdown__item--disabled) { background: var(--wow-surface-hover); }
.wow-dropdown__item:disabled, .wow-dropdown__item--disabled { opacity: 0.5; cursor: not-allowed; }
.wow-dropdown__item > i[data-lucide], .wow-dropdown__item > svg {
  width: 14px;
  height: 14px;
  color: var(--wow-text-muted);
  flex-shrink: 0;
}
.wow-dropdown__item-shortcut {
  margin-left: auto;
  color: var(--wow-text-subtle);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
}

.wow-dropdown__item--danger { color: var(--wow-danger); }
.wow-dropdown__item--danger > i[data-lucide], .wow-dropdown__item--danger > svg { color: var(--wow-danger); }
.wow-dropdown__item--danger:hover:not(:disabled) { background: var(--wow-danger-soft); }

.wow-dropdown__item--active {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
}

.wow-dropdown__divider {
  height: 1px;
  background: var(--wow-border);
  margin: var(--wow-space-1) 0;
}

.wow-dropdown__label {
  padding: var(--wow-space-2) var(--wow-space-3) var(--wow-space-1);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- components/tooltip/tooltip.css --- */
.wow-tip {
  position: relative;
  display: inline-flex;
}

.wow-tip__content {
  position: absolute;
  z-index: var(--wow-z-tooltip);
  padding: var(--wow-space-1) var(--wow-space-2);
  background: var(--wow-text-strong);
  color: var(--wow-bg);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  line-height: 1.4;
  border-radius: var(--wow-radius-sm);
  box-shadow: var(--wow-shadow-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--wow-transition-fast), transform var(--wow-transition-fast);
}

.wow-tip__content::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--wow-text-strong);
  transform: rotate(45deg);
}

/* Posiciones */
.wow-tip__content--top {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.wow-tip__content--top::after { bottom: -4px; left: 50%; margin-left: -4px; }

.wow-tip__content--bottom {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.wow-tip__content--bottom::after { top: -4px; left: 50%; margin-left: -4px; }

.wow-tip__content--left {
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
.wow-tip__content--left::after { right: -4px; top: 50%; margin-top: -4px; }

.wow-tip__content--right {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.wow-tip__content--right::after { left: -4px; top: 50%; margin-top: -4px; }

/* Hover / focus */
.wow-tip:hover .wow-tip__content,
.wow-tip:focus-within .wow-tip__content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wow-tip:hover .wow-tip__content--left,
.wow-tip:focus-within .wow-tip__content--left,
.wow-tip:hover .wow-tip__content--right,
.wow-tip:focus-within .wow-tip__content--right {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Multi-línea */
.wow-tip__content--multiline {
  white-space: normal;
  max-width: 220px;
  text-align: center;
}

/* Variantes semánticas */
.wow-tip__content--danger { background: var(--wow-danger); color: #fff; }
.wow-tip__content--danger::after { background: var(--wow-danger); }
.wow-tip__content--accent { background: var(--wow-accent); color: var(--wow-text-inverse); }
.wow-tip__content--accent::after { background: var(--wow-accent); }

/* ==========================================
   Overlays
   ========================================== */

/* --- components/modal/modal.css --- */
.wow-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: var(--wow-z-modal);
  padding: var(--wow-space-4);
}
.wow-modal {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-xl);
  box-shadow: var(--wow-shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--wow-space-8));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wow-modal--lg { max-width: 720px; }
.wow-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--wow-space-5);
  border-bottom: 1px solid var(--wow-border);
}
.wow-modal__title {
  font-size: var(--wow-text-lg);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}
.wow-modal__close {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted); cursor: pointer;
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
}
.wow-modal__close:hover { background: var(--wow-surface-hover); color: var(--wow-text); }
.wow-modal__close svg, .wow-modal__close i { width: 18px; height: 18px; }
.wow-modal__body {
  padding: var(--wow-space-5);
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  overflow-y: auto;
}
.wow-modal__footer {
  display: flex; justify-content: flex-end; gap: var(--wow-space-2);
  padding: var(--wow-space-4) var(--wow-space-5);
  border-top: 1px solid var(--wow-border);
  background: var(--wow-bg-elevated);
}

/* ------------------------------
   Variante: Confirm Dialog
   ------------------------------ */
.wow-modal--confirm { max-width: 420px; text-align: center; }
.wow-modal--confirm .wow-modal__body {
  padding: var(--wow-space-6) var(--wow-space-6) var(--wow-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wow-space-3);
}
.wow-modal--confirm .wow-modal__footer { justify-content: center; }

.wow-confirm-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-full);
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
  margin-bottom: var(--wow-space-2);
}
.wow-confirm-icon > i[data-lucide], .wow-confirm-icon > svg { width: 28px; height: 28px; }

.wow-modal--confirm.wow-modal--danger  .wow-confirm-icon { background: var(--wow-danger-soft);  color: var(--wow-danger); }
.wow-modal--confirm.wow-modal--warning .wow-confirm-icon { background: var(--wow-warning-soft); color: var(--wow-warning); }
.wow-modal--confirm.wow-modal--success .wow-confirm-icon { background: var(--wow-success-soft); color: var(--wow-success); }
.wow-modal--confirm.wow-modal--info    .wow-confirm-icon { background: var(--wow-info-soft);    color: var(--wow-info); }

.wow-confirm-title {
  font-size: var(--wow-text-lg);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}
.wow-confirm-message { color: var(--wow-text-muted); font-size: var(--wow-text-sm); }

/* --- components/drawer/drawer.css --- */
/* Drawer — panel lateral deslizable */

.wow-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: var(--wow-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wow-transition-base), visibility var(--wow-transition-base);
}

.wow-drawer-backdrop--open {
  opacity: 1;
  visibility: visible;
}

.wow-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--wow-surface);
  border-left: 1px solid var(--wow-border);
  box-shadow: var(--wow-shadow-xl);
  z-index: var(--wow-z-modal);
  display: flex;
  flex-direction: column;
  transition: transform var(--wow-transition-base);
}

.wow-drawer--right {
  right: 0;
  transform: translateX(100%);
}

.wow-drawer--left {
  left: 0;
  border-left: none;
  border-right: 1px solid var(--wow-border);
  transform: translateX(-100%);
}

.wow-drawer--open {
  transform: translateX(0);
}

.wow-drawer--sm { width: 320px; }
.wow-drawer--lg { width: 560px; }
.wow-drawer--xl { width: 720px; }

.wow-drawer__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-4) var(--wow-space-5);
  border-bottom: 1px solid var(--wow-border);
  flex-shrink: 0;
}

.wow-drawer__title {
  flex: 1;
  font-size: var(--wow-text-lg);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  margin: 0;
}

.wow-drawer__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted);
  cursor: pointer;
  transition: background var(--wow-transition-fast), color var(--wow-transition-fast);
}

.wow-drawer__close:hover {
  background: var(--wow-surface-hover);
  color: var(--wow-text);
}

.wow-drawer__close > i[data-lucide],
.wow-drawer__close > svg {
  width: 18px;
  height: 18px;
}

.wow-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--wow-space-5);
}

.wow-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--wow-space-2);
  padding: var(--wow-space-4) var(--wow-space-5);
  border-top: 1px solid var(--wow-border);
  background: var(--wow-bg-elevated);
  flex-shrink: 0;
}

/* --- components/popover/popover.css --- */
/* Popover — tooltip interactivo con contenido rico */

.wow-popover {
  position: relative;
  display: inline-block;
}

.wow-popover__content {
  position: absolute;
  z-index: var(--wow-z-dropdown);
  min-width: 240px;
  max-width: 360px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  box-shadow: var(--wow-shadow-lg);
  padding: var(--wow-space-4);
  display: none;
}

.wow-popover--open .wow-popover__content {
  display: block;
}

/* Posiciones */
.wow-popover__content--top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.wow-popover__content--bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.wow-popover__content--left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.wow-popover__content--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.wow-popover__content--bottom-start {
  top: calc(100% + 8px);
  left: 0;
  transform: none;
}

.wow-popover__content--bottom-end {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  transform: none;
}

/* Flecha */
.wow-popover__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  transform: rotate(45deg);
}

.wow-popover__content--top .wow-popover__arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  border-top: none;
  border-left: none;
}

.wow-popover__content--bottom .wow-popover__arrow {
  top: -6px;
  left: 50%;
  margin-left: -5px;
  border-bottom: none;
  border-right: none;
}

/* Header del popover */
.wow-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wow-space-3);
}

.wow-popover__title {
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}

.wow-popover__body {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
  line-height: var(--wow-leading-normal);
}

.wow-popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--wow-space-2);
  margin-top: var(--wow-space-3);
  padding-top: var(--wow-space-3);
  border-top: 1px solid var(--wow-border);
}

/* --- components/command-palette/command-palette.css --- */
/* Command Palette — búsqueda global con acciones (⌘K) */

.wow-cmd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--wow-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.wow-cmd {
  width: 560px;
  max-width: 95vw;
  max-height: 480px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-xl);
  box-shadow: var(--wow-shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wow-cmd__search {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-4) var(--wow-space-5);
  border-bottom: 1px solid var(--wow-border);
}

.wow-cmd__search-icon {
  color: var(--wow-text-muted);
  flex-shrink: 0;
}

.wow-cmd__search-icon > i[data-lucide],
.wow-cmd__search-icon > svg {
  width: 20px;
  height: 20px;
}

.wow-cmd__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--wow-text);
  font-size: var(--wow-text-base);
  font-family: var(--wow-font-sans);
}

.wow-cmd__input::placeholder {
  color: var(--wow-text-subtle);
}

.wow-cmd__shortcut {
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-subtle);
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  padding: 2px 6px;
  border-radius: var(--wow-radius-sm);
}

.wow-cmd__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--wow-space-2);
}

.wow-cmd__group-label {
  padding: var(--wow-space-2) var(--wow-space-3);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wow-cmd__item {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-2) var(--wow-space-3);
  border-radius: var(--wow-radius-md);
  cursor: pointer;
  transition: background var(--wow-transition-fast);
}

.wow-cmd__item:hover,
.wow-cmd__item--active {
  background: var(--wow-surface-hover);
}

.wow-cmd__item--active {
  background: var(--wow-accent-soft);
}

.wow-cmd__item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-md);
  background: var(--wow-bg-elevated);
  color: var(--wow-text-muted);
  flex-shrink: 0;
}

.wow-cmd__item-icon > i[data-lucide],
.wow-cmd__item-icon > svg {
  width: 16px;
  height: 16px;
}

.wow-cmd__item-content {
  flex: 1;
  min-width: 0;
}

.wow-cmd__item-title {
  font-size: var(--wow-text-sm);
  color: var(--wow-text);
  font-weight: var(--wow-weight-medium);
}

.wow-cmd__item-desc {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wow-cmd__item-shortcut {
  font-family: var(--wow-font-mono);
  font-size: 11px;
  color: var(--wow-text-subtle);
  display: flex;
  gap: 4px;
}

.wow-cmd__item-shortcut kbd {
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  padding: 1px 5px;
  border-radius: var(--wow-radius-sm);
  box-shadow: 0 1px 0 var(--wow-border-strong);
}

.wow-cmd__footer {
  display: flex;
  align-items: center;
  gap: var(--wow-space-4);
  padding: var(--wow-space-2) var(--wow-space-4);
  border-top: 1px solid var(--wow-border);
  background: var(--wow-bg-elevated);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-subtle);
}

.wow-cmd__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wow-cmd__footer-hint kbd {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--wow-font-mono);
  font-size: 10px;
}

.wow-cmd__empty {
  padding: var(--wow-space-8);
  text-align: center;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}

/* --- components/tour/tour.css --- */
/* Tour — recorrido guiado paso a paso */

.wow-tour {
  position: absolute;
  inset: 0;
  z-index: var(--wow-z-modal);
  pointer-events: none;
}

/* Spotlight: usa box-shadow gigante para crear el "agujero" */
.wow-tour__spotlight {
  position: absolute;
  border-radius: var(--wow-radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  transition: all var(--wow-transition-slow);
  pointer-events: auto;
  outline: 2px solid var(--wow-accent);
  outline-offset: 4px;
}

.wow-tour__spotlight--rounded {
  border-radius: var(--wow-radius-full);
}

/* Pulso opcional alrededor del spotlight */
.wow-tour__pulse {
  position: absolute;
  border-radius: inherit;
  animation: wow-tour-pulse 1.6s ease-out infinite;
  pointer-events: none;
  inset: -4px;
  border: 2px solid var(--wow-accent);
}

@keyframes wow-tour-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Tooltip del paso */
.wow-tour__tooltip {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  box-shadow: var(--wow-shadow-xl);
  padding: var(--wow-space-4) var(--wow-space-5);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3);
}

.wow-tour__tooltip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  transform: rotate(45deg);
}

.wow-tour__tooltip--top    .wow-tour__tooltip-arrow { bottom: -7px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
.wow-tour__tooltip--bottom .wow-tour__tooltip-arrow { top: -7px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }
.wow-tour__tooltip--left   .wow-tour__tooltip-arrow { right: -7px; top: 50%; margin-top: -6px; border-left: none; border-bottom: none; }
.wow-tour__tooltip--right  .wow-tour__tooltip-arrow { left: -7px; top: 50%; margin-top: -6px; border-right: none; border-top: none; }

.wow-tour__tooltip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wow-space-3);
}

.wow-tour__tooltip-title {
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
}

.wow-tour__tooltip-title > i[data-lucide],
.wow-tour__tooltip-title > svg {
  width: 18px;
  height: 18px;
  color: var(--wow-accent);
}

.wow-tour__tooltip-skip {
  background: none;
  border: none;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  cursor: pointer;
  padding: 0;
  transition: color var(--wow-transition-fast);
}

.wow-tour__tooltip-skip:hover {
  color: var(--wow-text);
}

.wow-tour__tooltip-body {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
  line-height: var(--wow-leading-normal);
}

.wow-tour__tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3);
  margin-top: var(--wow-space-1);
}

/* Indicador de pasos (dots) */
.wow-tour__steps {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wow-tour__step-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-border-strong);
  transition: all var(--wow-transition-fast);
}

.wow-tour__step-dot--active {
  background: var(--wow-accent);
  width: 18px;
  border-radius: var(--wow-radius-full);
}

.wow-tour__step-dot--done {
  background: var(--wow-accent);
  opacity: 0.6;
}

.wow-tour__step-counter {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  font-variant-numeric: tabular-nums;
}

.wow-tour__nav {
  display: flex;
  gap: var(--wow-space-2);
}

/* Modal de bienvenida (sin spotlight, centrado) */
.wow-tour-welcome {
  position: relative;
  width: 480px;
  max-width: 95vw;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-xl);
  box-shadow: var(--wow-shadow-xl);
  padding: var(--wow-space-6);
  text-align: center;
}

.wow-tour-welcome__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--wow-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-full);
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
}

.wow-tour-welcome__icon > i[data-lucide],
.wow-tour-welcome__icon > svg {
  width: 32px;
  height: 32px;
}

.wow-tour-welcome__title {
  font-size: var(--wow-text-2xl);
  font-weight: var(--wow-weight-bold);
  color: var(--wow-text-strong);
  margin: 0 0 var(--wow-space-2);
}

.wow-tour-welcome__body {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-muted);
  line-height: var(--wow-leading-relaxed);
  margin: 0 0 var(--wow-space-5);
}

.wow-tour-welcome__features {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3);
  margin-bottom: var(--wow-space-5);
  text-align: left;
}

.wow-tour-welcome__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--wow-space-3);
}

.wow-tour-welcome__feature-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-md);
  background: var(--wow-bg-elevated);
  color: var(--wow-accent);
}

.wow-tour-welcome__feature-icon > i[data-lucide],
.wow-tour-welcome__feature-icon > svg {
  width: 16px;
  height: 16px;
}

.wow-tour-welcome__feature-text {
  flex: 1;
}

.wow-tour-welcome__feature-title {
  font-size: var(--wow-text-sm);
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-medium);
}

.wow-tour-welcome__feature-desc {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  margin-top: 2px;
}

.wow-tour-welcome__actions {
  display: flex;
  gap: var(--wow-space-2);
  justify-content: center;
}

/* ==========================================
   Feedback
   ========================================== */

/* --- components/alert/alert.css --- */
.wow-alert {
  display: flex;
  gap: var(--wow-space-3);
  padding: var(--wow-space-4);
  border: 1px solid var(--wow-border);
  border-left-width: 3px;
  border-radius: var(--wow-radius-md);
  background: var(--wow-surface);
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
}

.wow-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--wow-text-muted);
}
.wow-alert__icon > i[data-lucide], .wow-alert__icon > svg { width: 20px; height: 20px; }

.wow-alert__body { flex: 1; min-width: 0; }

.wow-alert__title {
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  margin: 0 0 var(--wow-space-1);
}

.wow-alert__message { color: var(--wow-text-muted); }
.wow-alert__message p:last-child { margin-bottom: 0; }

.wow-alert__actions {
  display: flex;
  gap: var(--wow-space-2);
  margin-top: var(--wow-space-3);
}

.wow-alert__close {
  background: transparent;
  border: none;
  color: var(--wow-text-subtle);
  cursor: pointer;
  padding: var(--wow-space-1);
  border-radius: var(--wow-radius-sm);
  align-self: flex-start;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.wow-alert__close:hover { color: var(--wow-text); background: var(--wow-surface-hover); }
.wow-alert__close > i[data-lucide], .wow-alert__close > svg { width: 14px; height: 14px; }

/* Variantes */
.wow-alert--info     { border-left-color: var(--wow-info);    background: var(--wow-info-soft); }
.wow-alert--info .wow-alert__icon    { color: var(--wow-info); }

.wow-alert--success  { border-left-color: var(--wow-success); background: var(--wow-success-soft); }
.wow-alert--success .wow-alert__icon { color: var(--wow-success); }

.wow-alert--warning  { border-left-color: var(--wow-warning); background: var(--wow-warning-soft); }
.wow-alert--warning .wow-alert__icon { color: var(--wow-warning); }

.wow-alert--danger   { border-left-color: var(--wow-danger);  background: var(--wow-danger-soft); }
.wow-alert--danger .wow-alert__icon  { color: var(--wow-danger); }

/* Banner full-width (sin borde redondeado) */
.wow-alert--banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-width: 1px;
}

/* --- components/toast/toast.css --- */
.wow-toast {
  display: flex; align-items: flex-start; gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-left: 3px solid var(--wow-text-muted);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-lg);
  min-width: 280px; max-width: 420px;
  font-size: var(--wow-text-sm);
}
.wow-toast__icon { flex-shrink: 0; margin-top: 2px; color: var(--wow-text-muted); }
.wow-toast__icon svg, .wow-toast__icon i { width: 18px; height: 18px; }
.wow-toast__body { flex: 1; min-width: 0; }
.wow-toast__title {
  font-weight: var(--wow-weight-semibold); color: var(--wow-text-strong); margin-bottom: 2px;
}
.wow-toast__desc { color: var(--wow-text-muted); font-size: var(--wow-text-xs); line-height: var(--wow-leading-normal); }
.wow-toast__close {
  background: transparent; border: none; color: var(--wow-text-subtle);
  cursor: pointer; padding: 0; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: var(--wow-radius-sm);
  transition: color var(--wow-transition-fast), background var(--wow-transition-fast);
}
.wow-toast__close:hover { color: var(--wow-text); background: var(--wow-surface-hover); }

.wow-toast--success { border-left-color: var(--wow-success); }
.wow-toast--success .wow-toast__icon { color: var(--wow-success); }
.wow-toast--warning { border-left-color: var(--wow-warning); }
.wow-toast--warning .wow-toast__icon { color: var(--wow-warning); }
.wow-toast--danger  { border-left-color: var(--wow-danger); }
.wow-toast--danger .wow-toast__icon { color: var(--wow-danger); }
.wow-toast--info    { border-left-color: var(--wow-info); }
.wow-toast--info .wow-toast__icon { color: var(--wow-info); }

/* --- components/notifications/notifications.css --- */
/* WOW Notifications — panel desplegable de actividad reciente */

.wow-notif {
  width: 380px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  box-shadow: var(--wow-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 520px;
}

.wow-notif__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-3) var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
}
.wow-notif__title {
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
}
.wow-notif__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--wow-space-1);
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
}
.wow-notif__mark-read {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--wow-accent);
  cursor: pointer;
  font-size: var(--wow-text-xs);
  padding: var(--wow-space-1) var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
}
.wow-notif__mark-read:hover { background: var(--wow-surface-hover); }

/* Tabs (todas, no leídas) */
.wow-notif__tabs {
  display: flex;
  gap: var(--wow-space-1);
  padding: 0 var(--wow-space-2);
  border-bottom: 1px solid var(--wow-border);
}
.wow-notif__tab {
  padding: var(--wow-space-2) var(--wow-space-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--wow-text-muted);
  cursor: pointer;
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  margin-bottom: -1px;
}
.wow-notif__tab--active {
  color: var(--wow-accent);
  border-bottom-color: var(--wow-accent);
}

/* Lista */
.wow-notif__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 380px;
}

.wow-notif-item {
  display: flex;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
  cursor: pointer;
  position: relative;
  transition: background var(--wow-transition-fast);
}
.wow-notif-item:last-child { border-bottom: none; }
.wow-notif-item:hover { background: var(--wow-surface-hover); }

.wow-notif-item--unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 22px;
  width: 6px;
  height: 6px;
  background: var(--wow-accent);
  border-radius: var(--wow-radius-full);
}

.wow-notif-item__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-full);
  background: var(--wow-surface-hover);
  color: var(--wow-text-muted);
  flex-shrink: 0;
}
.wow-notif-item__icon > i[data-lucide], .wow-notif-item__icon > svg { width: 16px; height: 16px; }

.wow-notif-item__icon--whatsapp { background: rgba(37, 211, 102, 0.15); color: #25D366; }
.wow-notif-item__icon--task    { background: var(--wow-accent-soft); color: var(--wow-accent); }
.wow-notif-item__icon--warning { background: var(--wow-warning-soft); color: var(--wow-warning); }
.wow-notif-item__icon--danger  { background: var(--wow-danger-soft); color: var(--wow-danger); }
.wow-notif-item__icon--success { background: var(--wow-success-soft); color: var(--wow-success); }
.wow-notif-item__icon--info    { background: var(--wow-info-soft); color: var(--wow-info); }

.wow-notif-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wow-notif-item__title {
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  line-height: 1.3;
}
.wow-notif-item--unread .wow-notif-item__title { color: var(--wow-text-strong); }

.wow-notif-item__msg {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  line-height: var(--wow-leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wow-notif-item__meta {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  margin-top: 4px;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
}

.wow-notif-item__actions {
  display: flex;
  gap: var(--wow-space-1);
  margin-top: var(--wow-space-2);
}

/* Footer */
.wow-notif__footer {
  padding: var(--wow-space-2);
  border-top: 1px solid var(--wow-border);
  text-align: center;
}
.wow-notif__footer a {
  display: block;
  padding: var(--wow-space-1);
  color: var(--wow-accent);
  font-size: var(--wow-text-sm);
  text-decoration: none;
  border-radius: var(--wow-radius-sm);
}
.wow-notif__footer a:hover { background: var(--wow-surface-hover); }

/* Empty */
.wow-notif__empty {
  padding: var(--wow-space-8) var(--wow-space-4);
  text-align: center;
  color: var(--wow-text-muted);
}
.wow-notif__empty i[data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--wow-text-subtle);
  margin-bottom: var(--wow-space-2);
}

/* Bell icon (trigger) */
.wow-notif-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.wow-notif-bell__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--wow-danger);
  color: #fff;
  border-radius: var(--wow-radius-full);
  border: 2px solid var(--wow-bg-elevated);
  font-size: 10px;
  font-weight: var(--wow-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- components/chat/chat.css --- */
/* =========================================================
   HanezUI — Chat
   Componente genérico para conversaciones: WhatsApp, Slack,
   chat interno, asistente IA. Agnóstico al backend.

   Variantes de presentación:
     .wow-chat--bubble  (default) burbujas tipo WhatsApp/iMessage
     .wow-chat--flat    sin burbuja, avatar lateral (Slack/Discord)
     .wow-chat--compact ancho completo, sin tint (asistente IA)
   ========================================================= */

/* ---------- Contenedor ---------- */
.wow-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--wow-bg);
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
}

.wow-chat__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-5);
  background: var(--wow-bg-elevated);
  border-bottom: 1px solid var(--wow-border);
  flex-shrink: 0;
}
.wow-chat__header-title {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-semibold);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-tight);
}
.wow-chat__header-subtitle {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  margin-top: 2px;
}
.wow-chat__header-grow { flex: 1; min-width: 0; }
.wow-chat__header-actions {
  display: flex;
  gap: var(--wow-space-1);
  align-items: center;
}

.wow-chat__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--wow-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3);
  scroll-behavior: smooth;
}

.wow-chat__footer {
  flex-shrink: 0;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  border-top: 1px solid var(--wow-border);
}

/* ---------- Separador de día ---------- */
.wow-chat__day {
  align-self: center;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  padding: var(--wow-space-1) var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
}

/* ---------- Mensaje: estructura común ---------- */
.wow-message {
  display: flex;
  gap: var(--wow-space-2);
  max-width: 75%;
  align-items: flex-end;
}
.wow-message__avatar { flex-shrink: 0; }
.wow-message__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wow-message__author {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  padding: 0 var(--wow-space-2);
}
.wow-message__bubble {
  padding: var(--wow-space-2) var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.wow-message__text { white-space: pre-wrap; }
.wow-message__text a { color: var(--wow-accent); text-decoration: underline; }
.wow-message__text code {
  font-family: var(--wow-font-mono);
  font-size: 0.85em;
  padding: 1px 4px;
  background: rgba(0,0,0,0.25);
  border-radius: var(--wow-radius-sm);
}
.wow-message__text pre {
  margin: var(--wow-space-2) 0 0;
  padding: var(--wow-space-2);
  background: rgba(0,0,0,0.35);
  border-radius: var(--wow-radius-sm);
  overflow-x: auto;
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  line-height: var(--wow-leading-normal);
}

.wow-message__meta {
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  margin-top: var(--wow-space-1);
  font-size: 10px;
  color: var(--wow-text-subtle);
  line-height: 1;
}
.wow-message__time { white-space: nowrap; }
.wow-message__status { display: inline-flex; }
.wow-message__status i[data-lucide],
.wow-message__status svg { width: 12px; height: 12px; }
.wow-message__status--read   { color: var(--wow-accent); }
.wow-message__status--error  { color: var(--wow-danger); }

/* Cola de burbuja (solo en variant --bubble) */
.wow-chat--bubble .wow-message--received .wow-message__bubble {
  border-bottom-left-radius: var(--wow-radius-sm);
}
.wow-chat--bubble .wow-message--sent .wow-message__bubble {
  border-bottom-right-radius: var(--wow-radius-sm);
}

/* ---------- Dirección: enviado ---------- */
.wow-message--sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.wow-message--sent .wow-message__stack { align-items: flex-end; }
.wow-message--sent .wow-message__bubble {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-message--sent .wow-message__text a { color: var(--wow-text-inverse); }
.wow-message--sent .wow-message__text code,
.wow-message--sent .wow-message__text pre { background: rgba(0,0,0,0.2); }
.wow-message--sent .wow-message__meta { justify-content: flex-end; }

/* ---------- Dirección: recibido ---------- */
.wow-message--received { align-self: flex-start; }

/* ---------- Mensajes de sistema ---------- */
.wow-message--system {
  align-self: center;
  max-width: 80%;
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  text-align: center;
  padding: var(--wow-space-1) var(--wow-space-3);
  background: transparent;
}
.wow-message--system .wow-message__bubble {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ---------- Cita / respuesta a mensaje ---------- */
.wow-message__reply {
  display: block;
  padding: var(--wow-space-1) var(--wow-space-2);
  margin: 0 0 var(--wow-space-2);
  background: rgba(255,255,255,0.06);
  border-left: 3px solid var(--wow-accent);
  border-radius: var(--wow-radius-sm);
  font-size: var(--wow-text-xs);
  line-height: var(--wow-leading-tight);
  color: var(--wow-text-muted);
}
.wow-message__reply-author {
  display: block;
  color: var(--wow-accent);
  font-weight: var(--wow-weight-semibold);
  margin-bottom: 2px;
}
.wow-message--sent .wow-message__reply {
  background: rgba(0,0,0,0.18);
  border-left-color: var(--wow-text-inverse);
  color: rgba(11,15,26,0.75);
}
.wow-message--sent .wow-message__reply-author { color: var(--wow-text-inverse); }

/* ---------- Adjuntos ---------- */
.wow-message__attachment {
  margin: 0 0 var(--wow-space-2);
  border-radius: var(--wow-radius-md);
  overflow: hidden;
}
.wow-message__attachment:last-child { margin-bottom: 0; }

.wow-message__image {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--wow-radius-md);
  cursor: zoom-in;
}

.wow-message__file {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: inherit;
  text-decoration: none;
  min-width: 220px;
}
.wow-message__file i[data-lucide],
.wow-message__file svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--wow-accent); }
.wow-message__file-info { display: flex; flex-direction: column; min-width: 0; }
.wow-message__file-name {
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wow-message__file-size {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}
.wow-message--sent .wow-message__file {
  background: rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.2);
}
.wow-message--sent .wow-message__file i[data-lucide],
.wow-message--sent .wow-message__file svg { color: var(--wow-text-inverse); }
.wow-message--sent .wow-message__file-name { color: var(--wow-text-inverse); }
.wow-message--sent .wow-message__file-size { color: rgba(11,15,26,0.65); }

.wow-message__audio {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  min-width: 220px;
}
.wow-message__audio-play {
  width: 32px;
  height: 32px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
}
.wow-message__audio-play i[data-lucide],
.wow-message__audio-play svg { width: 14px; height: 14px; }
.wow-message__audio-wave {
  flex: 1;
  height: 24px;
  background:
    repeating-linear-gradient(
      90deg,
      currentColor 0 2px,
      transparent 2px 5px
    );
  color: var(--wow-text-subtle);
  opacity: 0.6;
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0.35) 100%);
}
.wow-message__audio-time {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  font-variant-numeric: tabular-nums;
}
.wow-message--sent .wow-message__audio-play {
  background: var(--wow-text-inverse);
  color: var(--wow-accent);
}
.wow-message--sent .wow-message__audio-time { color: rgba(11,15,26,0.7); }

/* ---------- Reacciones ---------- */
.wow-message__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--wow-space-1);
  padding: 0 var(--wow-space-1);
}
.wow-message--sent .wow-message__reactions { justify-content: flex-end; }

.wow-message__reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  cursor: pointer;
  transition: background var(--wow-transition-fast);
}
.wow-message__reaction:hover { background: var(--wow-surface-hover); }
.wow-message__reaction--mine {
  background: var(--wow-accent-soft);
  border-color: var(--wow-accent);
  color: var(--wow-accent);
}

/* ---------- Indicador de "escribiendo" ---------- */
.wow-chat__typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  border-bottom-left-radius: var(--wow-radius-sm);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-chat__typing-dots {
  display: inline-flex;
  gap: 3px;
}
.wow-chat__typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--wow-text-muted);
  border-radius: var(--wow-radius-full);
  animation: wow-chat-typing 1.2s infinite ease-in-out;
}
.wow-chat__typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.wow-chat__typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wow-chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- Composer (input + acciones) ---------- */
.wow-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: var(--wow-space-2);
}
.wow-chat__composer-actions {
  display: flex;
  gap: var(--wow-space-1);
  flex-shrink: 0;
}
.wow-chat__composer-input {
  flex: 1;
  min-height: 40px;
  max-height: 160px;
  resize: none;
  overflow-y: auto;
  padding: var(--wow-space-2) var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-family: inherit;
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  transition: border-color var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-chat__composer-input::placeholder { color: var(--wow-text-subtle); }
.wow-chat__composer-input:focus {
  outline: none;
  border-color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
}

/* =========================================================
   Variante FLAT — tipo Slack/Discord
   ========================================================= */
.wow-chat--flat .wow-message {
  max-width: 100%;
  align-items: flex-start;
  gap: var(--wow-space-3);
  flex-direction: row !important;
  align-self: stretch !important;
  padding: var(--wow-space-1) 0;
}
.wow-chat--flat .wow-message__stack { flex: 1; }
.wow-chat--flat .wow-message__bubble {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wow-text);
  border-radius: 0;
}
.wow-chat--flat .wow-message--sent .wow-message__bubble {
  background: transparent;
  color: var(--wow-text);
}
.wow-chat--flat .wow-message--sent .wow-message__text a { color: var(--wow-accent); }
.wow-chat--flat .wow-message__author {
  padding: 0;
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  display: inline;
}
.wow-chat--flat .wow-message__meta {
  display: inline-flex;
  margin-top: 0;
  margin-left: var(--wow-space-2);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-subtle);
}
.wow-chat--flat .wow-message__stack > :first-child:not(.wow-message__bubble) {
  margin-bottom: 2px;
}
.wow-chat--flat .wow-message__reactions { padding: 0; justify-content: flex-start !important; }
.wow-chat--flat .wow-message--sent .wow-message__file { background: rgba(255,255,255,0.05); }
.wow-chat--flat .wow-message--sent .wow-message__file-name { color: var(--wow-text-strong); }
.wow-chat--flat .wow-message--sent .wow-message__file-size { color: var(--wow-text-muted); }
.wow-chat--flat .wow-message--sent .wow-message__file i[data-lucide],
.wow-chat--flat .wow-message--sent .wow-message__file svg { color: var(--wow-accent); }

/* =========================================================
   Variante COMPACT — tipo asistente IA (ChatGPT-like)
   Ancho completo, sin burbuja tintada.
   ========================================================= */
.wow-chat--compact .wow-chat__body {
  padding: 0;
  gap: 0;
}
.wow-chat--compact .wow-message {
  max-width: 100%;
  align-self: stretch;
  flex-direction: row !important;
  gap: var(--wow-space-4);
  padding: var(--wow-space-5) var(--wow-space-6);
  border-bottom: 1px solid var(--wow-border);
  align-items: flex-start;
}
.wow-chat--compact .wow-message--sent { background: var(--wow-bg); }
.wow-chat--compact .wow-message--received { background: var(--wow-bg-elevated); }
.wow-chat--compact .wow-message__stack { flex: 1; align-items: flex-start !important; }
.wow-chat--compact .wow-message__bubble {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wow-text);
  font-size: var(--wow-text-base);
  line-height: var(--wow-leading-relaxed);
  border-radius: 0;
}
.wow-chat--compact .wow-message--sent .wow-message__bubble { color: var(--wow-text); }
.wow-chat--compact .wow-message--sent .wow-message__text a { color: var(--wow-accent); }
.wow-chat--compact .wow-message__author {
  padding: 0;
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-semibold);
  font-size: var(--wow-text-sm);
  margin-bottom: var(--wow-space-2);
}
.wow-chat--compact .wow-message__meta { margin-top: var(--wow-space-2); }
.wow-chat--compact .wow-message--sent .wow-message__file { background: rgba(255,255,255,0.05); }
.wow-chat--compact .wow-message--sent .wow-message__file-name { color: var(--wow-text-strong); }
.wow-chat--compact .wow-message--sent .wow-message__file-size { color: var(--wow-text-muted); }
.wow-chat--compact .wow-message--sent .wow-message__file i[data-lucide],
.wow-chat--compact .wow-message--sent .wow-message__file svg { color: var(--wow-accent); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 640px) {
  .wow-message { max-width: 88%; }
  .wow-chat__body { padding: var(--wow-space-3); }
  .wow-chat--compact .wow-message {
    padding: var(--wow-space-4);
    gap: var(--wow-space-3);
  }
}

/* --- components/progress/progress.css --- */
.wow-progress {
  width: 100%;
  height: 8px;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
  overflow: hidden;
  position: relative;
}

.wow-progress__bar {
  height: 100%;
  background: var(--wow-accent);
  border-radius: var(--wow-radius-full);
  transition: width var(--wow-transition-base);
}

.wow-progress--sm { height: 4px; }
.wow-progress--lg { height: 12px; }

.wow-progress--success .wow-progress__bar { background: var(--wow-success); }
.wow-progress--warning .wow-progress__bar { background: var(--wow-warning); }
.wow-progress--danger  .wow-progress__bar { background: var(--wow-danger); }

/* Indeterminate */
.wow-progress--indeterminate .wow-progress__bar {
  width: 35% !important;
  animation: wow-progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes wow-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Con etiqueta */
.wow-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-2);
}
.wow-progress-wrap__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--wow-text-xs);
}
.wow-progress-wrap__label { color: var(--wow-text); }
.wow-progress-wrap__value { color: var(--wow-text-muted); font-family: var(--wow-font-mono); }

/* Circular (radial) */
.wow-progress-circle {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  position: relative;
}
.wow-progress-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.wow-progress-circle__track {
  stroke: var(--wow-surface-hover);
  stroke-width: 4;
  fill: none;
}
.wow-progress-circle__bar {
  stroke: var(--wow-accent);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dasharray var(--wow-transition-base);
}
.wow-progress-circle__label {
  position: absolute;
  font-size: var(--wow-text-xs);
  color: var(--wow-text);
  font-weight: var(--wow-weight-semibold);
  font-family: var(--wow-font-mono);
}

/* --- components/spinner/spinner.css --- */
.wow-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--wow-border-strong);
  border-top-color: var(--wow-accent);
  border-radius: var(--wow-radius-full);
  animation: wow-spin 0.7s linear infinite;
  vertical-align: middle;
}

.wow-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.wow-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.wow-spinner--xl { width: 48px; height: 48px; border-width: 4px; }

.wow-spinner--muted { border-top-color: var(--wow-text-muted); }
.wow-spinner--success { border-top-color: var(--wow-success); }
.wow-spinner--danger { border-top-color: var(--wow-danger); }

.wow-spinner-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}

@keyframes wow-spin {
  to { transform: rotate(360deg); }
}

/* --- components/skeleton/skeleton.css --- */
.wow-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--wow-surface-hover) 0%,
    var(--wow-border-strong) 50%,
    var(--wow-surface-hover) 100%
  );
  background-size: 200% 100%;
  animation: wow-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--wow-radius-md);
}

/* Tipografía */
.wow-skeleton--text {
  height: 0.875rem;
  width: 100%;
  border-radius: var(--wow-radius-sm);
}
.wow-skeleton--text-sm { height: 0.75rem; }
.wow-skeleton--text-lg { height: 1.25rem; }
.wow-skeleton--title { height: 1.5rem; width: 60%; }

/* Formas */
.wow-skeleton--circle { border-radius: var(--wow-radius-full); }
.wow-skeleton--block { width: 100%; }

/* Composiciones */
.wow-skeleton-card {
  padding: var(--wow-space-5);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-3);
}

.wow-skeleton-list-item {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) 0;
}
.wow-skeleton-list-item + .wow-skeleton-list-item { border-top: 1px solid var(--wow-border); }
.wow-skeleton-list-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-2);
}

.wow-skeleton-table {
  width: 100%;
  border-collapse: collapse;
}
.wow-skeleton-table td {
  padding: var(--wow-space-3);
  border-bottom: 1px solid var(--wow-border);
}

@keyframes wow-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================
   Content
   ========================================== */

/* --- components/timeline/timeline.css --- */
.wow-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.wow-timeline__item {
  position: relative;
  padding-left: 36px;
  padding-bottom: var(--wow-space-5);
}
.wow-timeline__item:last-child { padding-bottom: 0; }

/* Línea vertical */
.wow-timeline__item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -4px;
  width: 2px;
  background: var(--wow-border);
}
.wow-timeline__item:last-child::before { display: none; }

.wow-timeline__dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--wow-surface);
  color: var(--wow-text-muted);
  border: 2px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-full);
  z-index: 1;
}
.wow-timeline__dot > i[data-lucide], .wow-timeline__dot > svg { width: 12px; height: 12px; }

.wow-timeline__dot--success { background: var(--wow-success-soft); color: var(--wow-success); border-color: var(--wow-success); }
.wow-timeline__dot--warning { background: var(--wow-warning-soft); color: var(--wow-warning); border-color: var(--wow-warning); }
.wow-timeline__dot--danger  { background: var(--wow-danger-soft);  color: var(--wow-danger);  border-color: var(--wow-danger); }
.wow-timeline__dot--accent  { background: var(--wow-accent-soft);  color: var(--wow-accent);  border-color: var(--wow-accent); }
.wow-timeline__dot--whatsapp { background: rgba(37,211,102,0.15);  color: #25D366; border-color: #25D366; }

.wow-timeline__title {
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  line-height: var(--wow-leading-tight);
}
.wow-timeline__meta {
  display: flex;
  gap: var(--wow-space-2);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  margin-top: 2px;
  align-items: center;
}
.wow-timeline__body {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  margin-top: var(--wow-space-2);
  padding: var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
}

/* Variante compacta (sin body) */
.wow-timeline--compact .wow-timeline__item { padding-bottom: var(--wow-space-3); }
.wow-timeline--compact .wow-timeline__body { display: none; }

/* --- components/flowchart/flowchart.css --- */
/* Flowchart — diagramas de flujo en SVG con tokens HanezUI */

.wow-flowchart {
  display: block;
  width: 100%;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  padding: var(--wow-space-4);
  overflow: auto;
}

.wow-flowchart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Nodos — forma */
.wow-flow-node__shape {
  fill: var(--wow-surface);
  stroke: var(--wow-border-strong);
  stroke-width: 1.5;
  transition: all var(--wow-transition-fast);
}

/* Contenido HTML dentro del nodo (foreignObject) */
.wow-flow-node__body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-family: var(--wow-font-sans);
  color: var(--wow-text);
  overflow: hidden;
}
.wow-flow-node__body--center { align-items: center; text-align: center; }

.wow-flow-node__head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wow-text-strong);
  font-size: 12px;
  font-weight: var(--wow-weight-semibold);
  line-height: 1.15;
}
.wow-flow-node__head i[data-lucide],
.wow-flow-node__head svg {
  width: 14px;
  height: 14px;
  color: var(--wow-accent);
  flex-shrink: 0;
}

.wow-flow-node__title { line-height: 1.15; }
.wow-flow-node__desc {
  color: var(--wow-text-muted);
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Texto SVG fallback (para diamantes con label corto) */
.wow-flow-node__text {
  fill: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: 12px;
  font-weight: var(--wow-weight-semibold);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* Tipos */
.wow-flow-node--start .wow-flow-node__shape,
.wow-flow-node--end .wow-flow-node__shape {
  fill: var(--wow-accent-soft);
  stroke: var(--wow-accent);
}
.wow-flow-node--start .wow-flow-node__head,
.wow-flow-node--end .wow-flow-node__head { color: var(--wow-accent); }
.wow-flow-node--start .wow-flow-node__head i,
.wow-flow-node--end .wow-flow-node__head i { color: var(--wow-accent); }

.wow-flow-node--decision .wow-flow-node__shape {
  fill: var(--wow-warning-soft);
  stroke: var(--wow-warning);
}
.wow-flow-node--decision .wow-flow-node__head { color: var(--wow-warning); }
.wow-flow-node--decision .wow-flow-node__head i { color: var(--wow-warning); }

.wow-flow-node--success .wow-flow-node__shape {
  fill: var(--wow-success-soft);
  stroke: var(--wow-success);
}
.wow-flow-node--success .wow-flow-node__head { color: var(--wow-success); }
.wow-flow-node--success .wow-flow-node__head i { color: var(--wow-success); }

.wow-flow-node--error .wow-flow-node__shape {
  fill: var(--wow-danger-soft);
  stroke: var(--wow-danger);
}
.wow-flow-node--error .wow-flow-node__head { color: var(--wow-danger); }
.wow-flow-node--error .wow-flow-node__head i { color: var(--wow-danger); }

/* Estados */
.wow-flow-node--current .wow-flow-node__shape {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px var(--wow-accent));
}

.wow-flow-node--muted .wow-flow-node__shape { opacity: 0.5; }
.wow-flow-node--muted .wow-flow-node__body { opacity: 0.6; }

/* Bordes (conexiones) */
.wow-flow-edge {
  fill: none;
  stroke: var(--wow-border-strong);
  stroke-width: 1.5;
  marker-end: url(#wow-flow-arrow);
}
.wow-flow-edge--active {
  stroke: var(--wow-accent);
  stroke-width: 2;
  marker-end: url(#wow-flow-arrow-accent);
}
.wow-flow-edge--success {
  stroke: var(--wow-success);
  marker-end: url(#wow-flow-arrow-success);
}
.wow-flow-edge--error {
  stroke: var(--wow-danger);
  marker-end: url(#wow-flow-arrow-error);
}
.wow-flow-edge--dashed { stroke-dasharray: 4 3; }

.wow-flow-edge-label {
  fill: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: 10px;
  font-weight: var(--wow-weight-medium);
  text-anchor: middle;
  dominant-baseline: middle;
}
.wow-flow-edge-label__bg { fill: var(--wow-bg-elevated); }

.wow-flow-arrow-path { fill: var(--wow-border-strong); }
.wow-flow-arrow-path--accent { fill: var(--wow-accent); }
.wow-flow-arrow-path--success { fill: var(--wow-success); }
.wow-flow-arrow-path--error { fill: var(--wow-danger); }

/* Leyenda */
.wow-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) 0 0;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}
.wow-flow-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.wow-flow-legend__swatch {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid;
}
.wow-flow-legend__swatch--start { background: var(--wow-accent-soft); border-color: var(--wow-accent); }
.wow-flow-legend__swatch--process { background: var(--wow-surface); border-color: var(--wow-border-strong); }
.wow-flow-legend__swatch--decision { background: var(--wow-warning-soft); border-color: var(--wow-warning); transform: rotate(45deg); }
.wow-flow-legend__swatch--success { background: var(--wow-success-soft); border-color: var(--wow-success); }
.wow-flow-legend__swatch--error { background: var(--wow-danger-soft); border-color: var(--wow-danger); }

/* --- components/flowchart/nodes/nodes.css --- */
/* Nodes WowFlow — formas específicas de flowchart para construir árboles de decisión.
   Extiende el componente flowchart: reutiliza .wow-flow-node, __body, __head, etc.
   Agrega 11 tipos semánticos con su propia geometría SVG y paleta.

   Tipos:
   - Condiciones (hexágono)
   - Decisión (diamante)
   - Ruleset (rectángulo + banda superior)
   - Tabla de decisión (documento)
   - Modelo IA (nube)
   - Acción (rectángulo)
   - Sub-Árbol (subrutina — rect con barras dobles)
   - Revisión Humana (paralelogramo inclinado)
   - Resultado (terminal pill)
   - Comentario (nota con bracket)
   - Sección (frame)
*/

/* Condiciones — warning */
.wow-flow-node--wf-conditions .wow-flow-node__shape {
  fill: var(--wow-warning-soft);
  stroke: var(--wow-warning);
}
.wow-flow-node--wf-conditions .wow-flow-node__head,
.wow-flow-node--wf-conditions .wow-flow-node__head i { color: var(--wow-warning); }

/* Decisión — accent */
.wow-flow-node--wf-decision .wow-flow-node__shape {
  fill: var(--wow-accent-soft);
  stroke: var(--wow-accent);
}
.wow-flow-node--wf-decision .wow-flow-node__head,
.wow-flow-node--wf-decision .wow-flow-node__head i { color: var(--wow-accent); }

/* Ruleset — accent con banda superior */
.wow-flow-node--wf-ruleset .wow-flow-node__shape {
  fill: var(--wow-surface);
  stroke: var(--wow-accent);
}
.wow-flow-node--wf-ruleset .wow-flow-node__head i { color: var(--wow-accent); }
.wow-flow-node--wf-ruleset .wow-flow-node__band { fill: var(--wow-accent); opacity: 0.22; }

/* Tabla de decisión — teal */
.wow-flow-node--wf-decision-table .wow-flow-node__shape {
  fill: var(--wow-surface);
  stroke: #14B8A6;
}
.wow-flow-node--wf-decision-table .wow-flow-node__head i { color: #14B8A6; }
.wow-flow-node--wf-decision-table .wow-flow-node__grid-line { stroke: #14B8A6; stroke-width: 0.75; opacity: 0.4; }

/* Modelo IA — púrpura con glow */
.wow-flow-node--wf-ai-model .wow-flow-node__shape {
  fill: rgba(168, 85, 247, 0.1);
  stroke: #A855F7;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35));
}
.wow-flow-node--wf-ai-model .wow-flow-node__head i { color: #C084FC; }

/* Acción — accent */
.wow-flow-node--wf-action .wow-flow-node__shape {
  fill: var(--wow-accent-soft);
  stroke: var(--wow-accent);
}
.wow-flow-node--wf-action .wow-flow-node__head i { color: var(--wow-accent); }

/* Sub-Árbol — indigo */
.wow-flow-node--wf-subtree .wow-flow-node__shape {
  fill: rgba(99, 102, 241, 0.12);
  stroke: #6366F1;
}
.wow-flow-node--wf-subtree .wow-flow-node__head i { color: #818CF8; }
.wow-flow-node--wf-subtree .wow-flow-node__bar {
  stroke: #6366F1;
  stroke-width: 1.5;
}

/* Revisión Humana — warning */
.wow-flow-node--wf-human-review .wow-flow-node__shape {
  fill: var(--wow-warning-soft);
  stroke: var(--wow-warning);
}
.wow-flow-node--wf-human-review .wow-flow-node__head i { color: var(--wow-warning); }

/* Resultado — neutral por defecto; los estados success/error lo tiñen */
.wow-flow-node--wf-result .wow-flow-node__shape {
  fill: var(--wow-surface);
  stroke: var(--wow-border-strong);
}
.wow-flow-node--wf-result.wow-flow-node--success .wow-flow-node__shape {
  fill: var(--wow-success-soft);
  stroke: var(--wow-success);
}
.wow-flow-node--wf-result.wow-flow-node--success .wow-flow-node__head,
.wow-flow-node--wf-result.wow-flow-node--success .wow-flow-node__head i { color: var(--wow-success); }

.wow-flow-node--wf-result.wow-flow-node--error .wow-flow-node__shape {
  fill: var(--wow-danger-soft);
  stroke: var(--wow-danger);
}
.wow-flow-node--wf-result.wow-flow-node--error .wow-flow-node__head,
.wow-flow-node--wf-result.wow-flow-node--error .wow-flow-node__head i { color: var(--wow-danger); }

.wow-flow-node--wf-result.wow-flow-node--current .wow-flow-node__shape {
  fill: var(--wow-accent-soft);
  stroke: var(--wow-accent);
}
.wow-flow-node--wf-result.wow-flow-node--current .wow-flow-node__head,
.wow-flow-node--wf-result.wow-flow-node--current .wow-flow-node__head i { color: var(--wow-accent); }

/* Comentario — dashed con bracket */
.wow-flow-node--wf-comment .wow-flow-node__shape {
  fill: var(--wow-bg);
  stroke: var(--wow-border-strong);
  stroke-dasharray: 4 3;
}
.wow-flow-node--wf-comment .wow-flow-node__bracket {
  stroke: var(--wow-border-strong);
  stroke-width: 1.5;
  fill: none;
}
.wow-flow-node--wf-comment .wow-flow-node__head i { color: var(--wow-warning); }

/* Sección — frame dashed con etiqueta flotante */
.wow-flow-node--wf-section .wow-flow-node__shape {
  fill: transparent;
  stroke: var(--wow-border-strong);
  stroke-dasharray: 5 3;
  stroke-width: 1.5;
}
.wow-flow-node--wf-section .wow-flow-node__label-bg {
  fill: var(--wow-bg-elevated);
  stroke: var(--wow-border);
  stroke-width: 1;
}
.wow-flow-node--wf-section .wow-flow-node__label-text {
  fill: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: 10px;
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- components/canvas/canvas.css --- */
/* Canvas — tablero libre tipo Miro/Canva con tokens HanezUI */

.wow-canvas {
  position: relative;
  background: var(--wow-bg);
  background-image: radial-gradient(circle, var(--wow-border) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
}

/* Toolbar superior */
.wow-canvas__toolbar {
  position: absolute;
  top: var(--wow-space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: 6px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  box-shadow: var(--wow-shadow-md);
  z-index: 5;
}
.wow-canvas__tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--wow-text-muted);
  border-radius: var(--wow-radius-full);
  cursor: pointer;
  transition: all var(--wow-transition-fast);
}
.wow-canvas__tool:hover { background: var(--wow-bg-elevated); color: var(--wow-text); }
.wow-canvas__tool--active {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-canvas__tool > i[data-lucide],
.wow-canvas__tool > svg { width: 16px; height: 16px; }
.wow-canvas__tool-sep {
  width: 1px;
  height: 20px;
  background: var(--wow-border);
  margin: 0 4px;
}

/* Zoom + acciones en esquina inferior derecha */
.wow-canvas__zoom {
  position: absolute;
  bottom: var(--wow-space-3);
  right: var(--wow-space-3);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-md);
  z-index: 5;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}
.wow-canvas__zoom-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--wow-text-muted);
  border-radius: var(--wow-radius-sm);
  cursor: pointer;
}
.wow-canvas__zoom-btn:hover { background: var(--wow-bg-elevated); color: var(--wow-text); }
.wow-canvas__zoom-btn > i[data-lucide],
.wow-canvas__zoom-btn > svg { width: 14px; height: 14px; }
.wow-canvas__zoom-value {
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--wow-text);
}

/* Colaboradores (cursors + avatares) */
.wow-canvas__collab {
  position: absolute;
  top: var(--wow-space-3);
  right: var(--wow-space-3);
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: 6px 10px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  box-shadow: var(--wow-shadow-md);
  z-index: 5;
}
.wow-canvas__avatars { display: flex; }
.wow-canvas__avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--wow-radius-full);
  border: 2px solid var(--wow-surface);
  margin-left: -6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: var(--wow-weight-semibold);
  font-family: var(--wow-font-sans);
}
.wow-canvas__avatar:first-child { margin-left: 0; }
.wow-canvas__share-btn {
  padding: 4px 12px;
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  border: none;
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
}

/* Capa de contenido */
.wow-canvas__layer {
  position: relative;
  width: 100%;
  height: 100%;
}

/* SVG de conexiones detrás de los elementos */
.wow-canvas__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.wow-canvas__wire {
  fill: none;
  stroke: var(--wow-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
}
.wow-canvas__wire--accent  { stroke: var(--wow-accent);  stroke-dasharray: none; }
.wow-canvas__wire--success { stroke: var(--wow-success); stroke-dasharray: none; stroke-width: 2; }
.wow-canvas__wire--error   { stroke: var(--wow-danger);  stroke-dasharray: none; stroke-width: 2; }

/* Tarjetas en el canvas */
.wow-canvas__item {
  position: absolute;
  z-index: 2;
}

/* Sticky notes */
.wow-sticky {
  width: 180px;
  min-height: 160px;
  padding: var(--wow-space-3);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  transform: rotate(var(--sticky-rot, -1deg));
  transition: transform var(--wow-transition-fast);
}
.wow-sticky:hover { transform: rotate(0deg) scale(1.02); }
.wow-sticky__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--wow-weight-semibold);
  opacity: 0.7;
}
.wow-sticky__title {
  font-weight: var(--wow-weight-semibold);
  font-size: var(--wow-text-base);
  line-height: 1.25;
}
.wow-sticky__body { flex: 1; }

.wow-sticky--yellow { background: #FEF08A; color: #713F12; }
.wow-sticky--pink   { background: #FBCFE8; color: #831843; }
.wow-sticky--cyan   { background: #A5F3FC; color: #155E75; }
.wow-sticky--green  { background: #BBF7D0; color: #14532D; }
.wow-sticky--purple { background: #DDD6FE; color: #4C1D95; }
.wow-sticky--orange { background: #FED7AA; color: #7C2D12; }

/* Card (limpia, sobre el tema oscuro) */
.wow-canvas-card {
  width: 240px;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--wow-font-sans);
}
.wow-canvas-card__head {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
}
.wow-canvas-card__head i[data-lucide],
.wow-canvas-card__head svg {
  width: 16px;
  height: 16px;
  color: var(--wow-accent);
}
.wow-canvas-card__desc {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  line-height: var(--wow-leading-normal);
}
.wow-canvas-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed var(--wow-border);
  font-size: 10px;
  color: var(--wow-text-muted);
}
.wow-canvas-card--selected {
  border-color: var(--wow-accent);
  box-shadow: 0 0 0 2px var(--wow-accent-soft), var(--wow-shadow-lg);
}

/* Text box (texto libre sobre el canvas) */
.wow-canvas-text {
  font-family: var(--wow-font-sans);
  color: var(--wow-text-strong);
  max-width: 320px;
}
.wow-canvas-text--title { font-size: var(--wow-text-xl); font-weight: var(--wow-weight-bold); letter-spacing: -0.01em; }
.wow-canvas-text--heading { font-size: var(--wow-text-lg); font-weight: var(--wow-weight-semibold); }
.wow-canvas-text--body { font-size: var(--wow-text-sm); color: var(--wow-text); line-height: var(--wow-leading-normal); }
.wow-canvas-text--label {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-accent);
  background: var(--wow-accent-soft);
  border: 1px solid var(--wow-accent);
  border-radius: var(--wow-radius-full);
}

/* Formas / shapes (rectángulos, círculos, triángulos) */
.wow-canvas-shape {
  background: var(--wow-surface);
  border: 1.5px solid var(--wow-border-strong);
  box-shadow: var(--wow-shadow-sm);
}
.wow-canvas-shape--rect { border-radius: var(--wow-radius-md); }
.wow-canvas-shape--pill { border-radius: 999px; }
.wow-canvas-shape--circle { border-radius: 50%; }
.wow-canvas-shape--accent { background: var(--wow-accent-soft); border-color: var(--wow-accent); }
.wow-canvas-shape--success { background: var(--wow-success-soft); border-color: var(--wow-success); }
.wow-canvas-shape--warning { background: var(--wow-warning-soft); border-color: var(--wow-warning); }
.wow-canvas-shape--danger  { background: var(--wow-danger-soft);  border-color: var(--wow-danger); }

/* Flow-node — elemento para diagramas de flujo sobre el canvas */
.wow-canvas-flow-node {
  position: relative;
  width: 200px;
  min-height: 86px;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-surface);
  border: 1.5px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-lg);
  box-shadow: var(--wow-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--wow-font-sans);
  color: var(--wow-text);
  transition: transform var(--wow-transition-fast), box-shadow var(--wow-transition-fast);
}
.wow-canvas-flow-node:hover {
  transform: translateY(-1px);
  box-shadow: var(--wow-shadow-lg);
}
.wow-canvas-flow-node__head {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  position: relative;
  z-index: 1;
}
.wow-canvas-flow-node__head i[data-lucide],
.wow-canvas-flow-node__head svg {
  width: 16px;
  height: 16px;
  color: var(--wow-accent);
  flex-shrink: 0;
}
.wow-canvas-flow-node__desc {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  line-height: var(--wow-leading-normal);
  position: relative;
  z-index: 1;
}

/* Tipo: terminal (inicio/fin) — pill */
.wow-canvas-flow-node--terminal {
  border-radius: 999px;
  align-items: center;
  text-align: center;
  padding: var(--wow-space-3) var(--wow-space-5);
}

/* Tipo: decisión — diamante vía pseudo-element rotado */
.wow-canvas-flow-node--decision {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 220px;
  min-height: 140px;
  padding: var(--wow-space-4) var(--wow-space-6);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wow-canvas-flow-node--decision::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wow-surface);
  border: 1.5px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-sm);
  transform: rotate(45deg) scale(0.72);
  box-shadow: var(--wow-shadow-md);
  z-index: 0;
}
.wow-canvas-flow-node--decision:hover::before {
  box-shadow: var(--wow-shadow-lg);
}

/* Tipo: I/O — paralelogramo vía pseudo-element skew */
.wow-canvas-flow-node--io {
  background: transparent;
  border: none;
  box-shadow: none;
}
.wow-canvas-flow-node--io::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wow-surface);
  border: 1.5px solid var(--wow-border-strong);
  border-radius: var(--wow-radius-sm);
  transform: skewX(-14deg);
  box-shadow: var(--wow-shadow-md);
  z-index: 0;
}
.wow-canvas-flow-node--io:hover::before {
  box-shadow: var(--wow-shadow-lg);
}

/* Estados (aplicables a cualquier tipo) */
.wow-canvas-flow-node--success { border-color: var(--wow-success); background: var(--wow-success-soft); }
.wow-canvas-flow-node--success::before { border-color: var(--wow-success); background: var(--wow-success-soft); }
.wow-canvas-flow-node--success .wow-canvas-flow-node__head i[data-lucide],
.wow-canvas-flow-node--success .wow-canvas-flow-node__head svg { color: var(--wow-success); }

.wow-canvas-flow-node--error { border-color: var(--wow-danger); background: var(--wow-danger-soft); }
.wow-canvas-flow-node--error::before { border-color: var(--wow-danger); background: var(--wow-danger-soft); }
.wow-canvas-flow-node--error .wow-canvas-flow-node__head i[data-lucide],
.wow-canvas-flow-node--error .wow-canvas-flow-node__head svg { color: var(--wow-danger); }

.wow-canvas-flow-node--current { border-color: var(--wow-accent); background: var(--wow-accent-soft); box-shadow: 0 0 0 2px var(--wow-accent-soft), var(--wow-shadow-md); }
.wow-canvas-flow-node--current::before { border-color: var(--wow-accent); background: var(--wow-accent-soft); }

.wow-canvas-flow-node--muted { opacity: 0.55; }

/* Grupo / frame — para agrupar varios items */
.wow-canvas-frame {
  position: absolute;
  border: 1.5px dashed var(--wow-border-strong);
  border-radius: var(--wow-radius-md);
  padding: 0;
  z-index: 0;
}
.wow-canvas-frame__label {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 2px 10px;
  background: var(--wow-bg);
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: 10px;
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--wow-radius-sm);
}

/* Cursor de colaborador (en vivo) */
.wow-canvas-cursor {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.wow-canvas-cursor__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.wow-canvas-cursor__name {
  margin-top: 12px;
  padding: 2px 8px;
  font-family: var(--wow-font-sans);
  font-size: 10px;
  font-weight: var(--wow-weight-semibold);
  color: #fff;
  border-radius: var(--wow-radius-sm);
  white-space: nowrap;
}

/* Minimap (esquina inferior izquierda) */
.wow-canvas__minimap {
  position: absolute;
  bottom: var(--wow-space-3);
  left: var(--wow-space-3);
  width: 140px;
  height: 90px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  box-shadow: var(--wow-shadow-md);
  z-index: 5;
  overflow: hidden;
  padding: 8px;
}
.wow-canvas__minimap-viewport {
  position: absolute;
  border: 1.5px solid var(--wow-accent);
  background: var(--wow-accent-soft);
  border-radius: 2px;
}
.wow-canvas__minimap-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wow-text-muted);
}

/* --- components/kanban/kanban.css --- */
/* Kanban — tablero por columnas de estado */

.wow-kanban {
  display: flex;
  flex-direction: column;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
}

.wow-kanban__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-surface);
  border-bottom: 1px solid var(--wow-border);
  flex-wrap: wrap;
}
.wow-kanban__title {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  color: var(--wow-text-strong);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  margin: 0;
}
.wow-kanban__title i[data-lucide],
.wow-kanban__title svg { width: 18px; height: 18px; color: var(--wow-accent); }

.wow-kanban__toolbar { display: flex; align-items: center; gap: var(--wow-space-2); flex-wrap: wrap; }
.wow-kanban__search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-family: var(--wow-font-sans);
  min-width: 200px;
}
.wow-kanban__search i { width: 12px; height: 12px; }

.wow-kanban__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
}
.wow-kanban__chip i { width: 12px; height: 12px; }

/* Tablero (columnas) */
.wow-kanban__board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--wow-space-3);
  padding: var(--wow-space-3);
  overflow-x: auto;
  background: var(--wow-bg);
  align-items: stretch;
}

/* Columna */
.wow-kanban__col {
  display: flex;
  flex-direction: column;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  min-height: 300px;
}
.wow-kanban__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--wow-border);
}
.wow-kanban__col-title {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--wow-text-strong);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
}
.wow-kanban__col-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wow-border-strong);
}
.wow-kanban__col-dot--todo      { background: var(--wow-text-muted); }
.wow-kanban__col-dot--progress  { background: var(--wow-accent); }
.wow-kanban__col-dot--review    { background: var(--wow-warning); }
.wow-kanban__col-dot--done      { background: var(--wow-success); }
.wow-kanban__col-dot--blocked   { background: var(--wow-danger); }

.wow-kanban__col-count {
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  color: var(--wow-text-muted);
  padding: 1px 8px;
  border-radius: var(--wow-radius-full);
  font-size: 10px;
  font-weight: var(--wow-weight-medium);
}
.wow-kanban__col-menu {
  background: transparent; border: none; color: var(--wow-text-muted);
  cursor: pointer; width: 24px; height: 24px; border-radius: var(--wow-radius-sm);
  display: grid; place-items: center;
}
.wow-kanban__col-menu:hover { background: var(--wow-bg); color: var(--wow-text); }
.wow-kanban__col-menu i { width: 14px; height: 14px; }

.wow-kanban__col-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; flex: 1;
}

/* Card */
.wow-kanban__card {
  position: relative;
  padding: 10px 12px;
  padding-left: 14px;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--wow-font-sans);
  cursor: grab;
  transition: all var(--wow-transition-fast);
}
.wow-kanban__card:hover {
  border-color: var(--wow-border-strong);
  box-shadow: var(--wow-shadow-md);
  transform: translateY(-1px);
}
.wow-kanban__card::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--wow-border-strong);
}

.wow-kanban__card--p-low::before      { background: var(--wow-text-muted); }
.wow-kanban__card--p-medium::before   { background: var(--wow-accent); }
.wow-kanban__card--p-high::before     { background: var(--wow-warning); }
.wow-kanban__card--p-urgent::before   { background: var(--wow-danger); }

.wow-kanban__card--selected {
  border-color: var(--wow-accent);
  box-shadow: 0 0 0 2px var(--wow-accent-soft), var(--wow-shadow-md);
}
.wow-kanban__card--overdue {
  border-color: var(--wow-danger);
  background: var(--wow-danger-soft);
}
.wow-kanban__card--done .wow-kanban__card-title { color: var(--wow-text-muted); text-decoration: line-through; }
.wow-kanban__card--done { opacity: 0.75; }

.wow-kanban__card-id {
  font-size: 10px;
  color: var(--wow-text-subtle);
  font-family: var(--wow-font-mono);
  letter-spacing: 0.04em;
}
.wow-kanban__card-title {
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  line-height: 1.3;
}
.wow-kanban__card-desc {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wow-kanban__card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wow-kanban__tag {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--wow-weight-medium);
  border-radius: var(--wow-radius-full);
  border: 1px solid;
}
.wow-kanban__tag--accent  { color: var(--wow-accent);  background: var(--wow-accent-soft);  border-color: var(--wow-accent); }
.wow-kanban__tag--success { color: var(--wow-success); background: var(--wow-success-soft); border-color: var(--wow-success); }
.wow-kanban__tag--warning { color: var(--wow-warning); background: var(--wow-warning-soft); border-color: var(--wow-warning); }
.wow-kanban__tag--danger  { color: var(--wow-danger);  background: var(--wow-danger-soft);  border-color: var(--wow-danger); }
.wow-kanban__tag--muted   { color: var(--wow-text-muted); background: var(--wow-bg); border-color: var(--wow-border); }

.wow-kanban__card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wow-space-2);
  padding-top: 4px;
}
.wow-kanban__meta {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--wow-text-muted);
  font-size: 10px;
}
.wow-kanban__meta span { display: inline-flex; align-items: center; gap: 3px; }
.wow-kanban__meta i { width: 12px; height: 12px; }
.wow-kanban__meta--overdue { color: var(--wow-danger); font-weight: var(--wow-weight-semibold); }

.wow-kanban__assignees { display: flex; }
.wow-kanban__assignee {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--wow-surface);
  margin-left: -6px;
  display: grid; place-items: center;
  color: #fff; font-size: 9px; font-weight: var(--wow-weight-semibold);
}
.wow-kanban__assignee:first-child { margin-left: 0; }

.wow-kanban__progress {
  height: 3px; background: var(--wow-border); border-radius: 2px;
  overflow: hidden;
}
.wow-kanban__progress-bar {
  height: 100%; background: var(--wow-accent);
  transition: width var(--wow-transition-base);
}

/* Botón "+ agregar tarea" */
.wow-kanban__add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  border: 1.5px dashed var(--wow-border);
  border-radius: var(--wow-radius-md);
  background: transparent;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-family: var(--wow-font-sans);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
  transition: all var(--wow-transition-fast);
}
.wow-kanban__add:hover {
  border-color: var(--wow-accent);
  color: var(--wow-accent);
  background: var(--wow-accent-soft);
}
.wow-kanban__add i { width: 14px; height: 14px; }

/* Swimlane (agrupación horizontal) */
.wow-kanban__swimlane {
  display: flex; flex-direction: column; gap: var(--wow-space-2);
  margin-bottom: var(--wow-space-3);
}
.wow-kanban__swimlane-head {
  display: flex; align-items: center; gap: var(--wow-space-2);
  padding: 6px 12px;
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--wow-bg-elevated);
  border-radius: var(--wow-radius-sm);
}

/* --- components/version-control/version-control.css --- */
/* VersionControl — git graph, log, PR, diff y branches */

.wow-vc {
  display: flex;
  flex-direction: column;
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
  font-family: var(--wow-font-sans);
}

.wow-vc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-surface);
  border-bottom: 1px solid var(--wow-border);
  flex-wrap: wrap;
}
.wow-vc__title {
  display: flex; align-items: center; gap: var(--wow-space-2);
  color: var(--wow-text-strong);
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  margin: 0;
}
.wow-vc__title i { width: 18px; height: 18px; color: var(--wow-accent); }

.wow-vc__repo {
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  background: var(--wow-bg);
  padding: 3px 8px;
  border-radius: var(--wow-radius-sm);
  border: 1px solid var(--wow-border);
}

.wow-vc__branch-picker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
}
.wow-vc__branch-picker i { width: 12px; height: 12px; color: var(--wow-accent); }

/* Cuerpo con split opcional */
.wow-vc__body { display: flex; }
.wow-vc__sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--wow-border);
  padding: var(--wow-space-3);
  background: var(--wow-bg);
}
.wow-vc__sidebar-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wow-text-subtle);
  font-weight: var(--wow-weight-semibold);
  padding: 0 8px 6px;
}
.wow-vc__branch-list { display: flex; flex-direction: column; gap: 2px; }
.wow-vc__branch {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text);
  font-size: var(--wow-text-xs);
  cursor: pointer;
  font-family: var(--wow-font-mono);
}
.wow-vc__branch:hover { background: var(--wow-bg-elevated); }
.wow-vc__branch--active { background: var(--wow-accent-soft); color: var(--wow-accent); font-weight: var(--wow-weight-semibold); }
.wow-vc__branch i { width: 12px; height: 12px; color: var(--wow-text-muted); }
.wow-vc__branch--active i { color: var(--wow-accent); }
.wow-vc__branch-meta {
  margin-left: auto;
  font-family: var(--wow-font-sans);
  font-size: 10px;
  color: var(--wow-text-muted);
}

.wow-vc__main { flex: 1; min-width: 0; }

/* Log de commits con graph */
.wow-vc__log {
  display: flex;
  flex-direction: column;
}
.wow-vc__commit {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--wow-space-3);
  padding: 10px var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
  position: relative;
  transition: background var(--wow-transition-fast);
}
.wow-vc__commit:hover { background: var(--wow-surface); }
.wow-vc__commit:last-child { border-bottom: none; }

/* Columna del graph — SVG compartido */
.wow-vc__graph {
  width: 60px;
  align-self: stretch;
  position: relative;
}
.wow-vc__graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Contenido del commit */
.wow-vc__commit-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wow-vc__commit-subject {
  color: var(--wow-text-strong);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wow-vc__commit-desc {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-vc__commit-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px;
  color: var(--wow-text-muted);
}
.wow-vc__commit-meta span { display: inline-flex; align-items: center; gap: 4px; }
.wow-vc__commit-meta i { width: 11px; height: 11px; }

.wow-vc__hash {
  font-family: var(--wow-font-mono);
  font-size: 10px;
  color: var(--wow-text-muted);
  background: var(--wow-bg);
  padding: 2px 6px;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
}

.wow-vc__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 9px; font-weight: var(--wow-weight-semibold);
}

/* Tags/pills dentro del subject */
.wow-vc__ref {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  font-family: var(--wow-font-mono);
  font-size: 10px;
  font-weight: var(--wow-weight-medium);
  border-radius: var(--wow-radius-full);
  border: 1px solid;
}
.wow-vc__ref i { width: 10px; height: 10px; }
.wow-vc__ref--head    { color: var(--wow-accent);  background: var(--wow-accent-soft);  border-color: var(--wow-accent); }
.wow-vc__ref--branch  { color: var(--wow-success); background: var(--wow-success-soft); border-color: var(--wow-success); }
.wow-vc__ref--tag     { color: var(--wow-warning); background: var(--wow-warning-soft); border-color: var(--wow-warning); }
.wow-vc__ref--remote  { color: var(--wow-text-muted); background: var(--wow-bg); border-color: var(--wow-border); }

/* PR Card */
.wow-vc-pr {
  padding: var(--wow-space-4);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  display: flex; flex-direction: column; gap: var(--wow-space-3);
}
.wow-vc-pr__head { display: flex; align-items: flex-start; gap: var(--wow-space-3); }
.wow-vc-pr__status {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  flex-shrink: 0;
}
.wow-vc-pr__status--open    { background: var(--wow-success-soft); color: var(--wow-success); }
.wow-vc-pr__status--merged  { background: rgba(167, 139, 250, 0.12); color: #A78BFA; }
.wow-vc-pr__status--closed  { background: var(--wow-danger-soft); color: var(--wow-danger); }
.wow-vc-pr__status--draft   { background: var(--wow-bg); color: var(--wow-text-muted); border: 1px dashed var(--wow-border-strong); }
.wow-vc-pr__status i { width: 18px; height: 18px; }

.wow-vc-pr__title {
  color: var(--wow-text-strong);
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  line-height: 1.3;
  margin: 0;
}
.wow-vc-pr__sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  margin-top: 4px;
}
.wow-vc-pr__sub code {
  font-family: var(--wow-font-mono);
  background: var(--wow-bg);
  padding: 1px 6px;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  font-size: 10px;
  color: var(--wow-text);
}

.wow-vc-pr__row { display: flex; gap: var(--wow-space-4); flex-wrap: wrap; }
.wow-vc-pr__stat {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}
.wow-vc-pr__stat strong { color: var(--wow-text-strong); font-weight: var(--wow-weight-semibold); }
.wow-vc-pr__stat i { width: 13px; height: 13px; }
.wow-vc-pr__stat--add { color: var(--wow-success); }
.wow-vc-pr__stat--del { color: var(--wow-danger); }

.wow-vc-pr__checks {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px;
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
}
.wow-vc-pr__check {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--wow-text-xs);
  color: var(--wow-text);
}
.wow-vc-pr__check i { width: 13px; height: 13px; }
.wow-vc-pr__check--ok i { color: var(--wow-success); }
.wow-vc-pr__check--fail i { color: var(--wow-danger); }
.wow-vc-pr__check--run i { color: var(--wow-warning); }
.wow-vc-pr__check-time { margin-left: auto; color: var(--wow-text-muted); font-size: 10px; }

/* Diff */
.wow-vc-diff {
  font-family: var(--wow-font-mono);
  font-size: 12px;
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  overflow: hidden;
}
.wow-vc-diff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wow-space-2);
  padding: 8px 12px;
  background: var(--wow-surface);
  border-bottom: 1px solid var(--wow-border);
  font-size: var(--wow-text-xs);
  color: var(--wow-text);
}
.wow-vc-diff__path { font-family: var(--wow-font-mono); font-weight: var(--wow-weight-medium); color: var(--wow-text-strong); }
.wow-vc-diff__stats { display: flex; gap: 10px; font-size: 10px; }
.wow-vc-diff__stats--add { color: var(--wow-success); }
.wow-vc-diff__stats--del { color: var(--wow-danger); }

.wow-vc-diff__body { margin: 0; padding: 0; }
.wow-vc-diff__line {
  display: grid;
  grid-template-columns: 44px 44px 1fr;
  line-height: 1.5;
  padding: 0;
}
.wow-vc-diff__ln {
  padding: 0 8px;
  text-align: right;
  color: var(--wow-text-subtle);
  background: var(--wow-bg);
  user-select: none;
  font-size: 10px;
}
.wow-vc-diff__content {
  padding: 0 12px;
  white-space: pre;
  color: var(--wow-text);
}
.wow-vc-diff__line--add { background: rgba(16, 185, 129, 0.08); }
.wow-vc-diff__line--add .wow-vc-diff__content { color: #10B981; }
.wow-vc-diff__line--del { background: rgba(239, 68, 68, 0.08); }
.wow-vc-diff__line--del .wow-vc-diff__content { color: #F87171; }
.wow-vc-diff__line--hunk { background: var(--wow-bg-elevated); }
.wow-vc-diff__line--hunk .wow-vc-diff__content { color: var(--wow-accent); }

/* ---------------- Visor de código ---------------- */

.wow-vc-code {
  display: flex;
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  overflow: hidden;
  font-family: var(--wow-font-mono);
  font-size: 12px;
  line-height: 1.55;
}

/* Árbol de archivos */
.wow-vc__filetree {
  width: 240px;
  flex-shrink: 0;
  background: var(--wow-surface);
  border-right: 1px solid var(--wow-border);
  padding: 8px 6px;
  overflow-y: auto;
  max-height: 620px;
  font-family: var(--wow-font-sans);
}
.wow-vc__filetree-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-vc__filetree-search i { width: 12px; height: 12px; }

.wow-vc__tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text);
  font-size: var(--wow-text-xs);
  cursor: pointer;
  white-space: nowrap;
}
.wow-vc__tree-item:hover { background: var(--wow-bg-elevated); }
.wow-vc__tree-item--active {
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  font-weight: var(--wow-weight-medium);
}
.wow-vc__tree-item > i {
  width: 13px; height: 13px;
  color: var(--wow-text-muted);
  flex-shrink: 0;
}
.wow-vc__tree-item--folder > i { color: var(--wow-warning); }
.wow-vc__tree-item--active > i { color: var(--wow-accent); }
.wow-vc__tree-item-meta {
  margin-left: auto;
  font-family: var(--wow-font-mono);
  font-size: 9px;
  color: var(--wow-text-subtle);
}

.wow-vc__tree-children {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 12px;
  border-left: 1px dashed var(--wow-border);
  margin: 1px 0 2px 13px;
}

/* Vista de código */
.wow-vc-code__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wow-vc-code__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wow-space-3);
  padding: 8px 12px;
  background: var(--wow-surface);
  border-bottom: 1px solid var(--wow-border);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  flex-wrap: wrap;
}
.wow-vc-code__path {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--wow-text);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
}
.wow-vc-code__path i { width: 13px; height: 13px; color: var(--wow-accent); }
.wow-vc-code__path-sep { color: var(--wow-text-subtle); padding: 0 2px; }
.wow-vc-code__path-file { color: var(--wow-text-strong); font-weight: var(--wow-weight-medium); }

.wow-vc-code__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wow-vc-code__meta {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--wow-text-muted);
  font-size: 10px;
}
.wow-vc-code__meta i { width: 12px; height: 12px; }
.wow-vc-code__icon-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text-muted);
  cursor: pointer;
}
.wow-vc-code__icon-btn:hover { background: var(--wow-bg-elevated); color: var(--wow-text); }
.wow-vc-code__icon-btn i { width: 13px; height: 13px; }

.wow-vc-code__scroll { overflow: auto; max-height: 620px; }

.wow-vc-code__line {
  display: grid;
  grid-template-columns: 48px 1fr;
  line-height: 1.55;
}
.wow-vc-code__line:hover { background: var(--wow-surface); }
.wow-vc-code__line--active { background: var(--wow-accent-soft); }
.wow-vc-code__line--active .wow-vc-code__ln { color: var(--wow-accent); font-weight: var(--wow-weight-semibold); }

.wow-vc-code__ln {
  padding: 0 10px;
  text-align: right;
  color: var(--wow-text-subtle);
  user-select: none;
  font-size: 10px;
  border-right: 1px solid var(--wow-border);
  background: var(--wow-bg);
}
.wow-vc-code__src {
  padding: 0 14px;
  white-space: pre;
  color: var(--wow-text);
}

/* Tokens de sintaxis */
.wow-tok-kw  { color: #F472B6; }
.wow-tok-str { color: #86EFAC; }
.wow-tok-com { color: var(--wow-text-subtle); font-style: italic; }
.wow-tok-fn  { color: #38BDF8; }
.wow-tok-num { color: #FDE68A; }
.wow-tok-cls { color: #A78BFA; }
.wow-tok-op  { color: var(--wow-text-muted); }
.wow-tok-dec { color: var(--wow-warning); }
.wow-tok-var { color: var(--wow-text-strong); }

/* Blame */
.wow-vc-code--blame .wow-vc-code__line {
  grid-template-columns: 220px 48px 1fr;
}
.wow-vc-code__blame {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: var(--wow-surface);
  border-right: 1px solid var(--wow-border);
  font-family: var(--wow-font-sans);
  font-size: 10px;
  color: var(--wow-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wow-vc-code__blame-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 8px; font-weight: var(--wow-weight-semibold);
  flex-shrink: 0;
}
.wow-vc-code__blame-hash {
  font-family: var(--wow-font-mono);
  color: var(--wow-text-subtle);
  font-size: 9px;
}
.wow-vc-code__blame-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wow-text);
}
.wow-vc-code__blame--boundary { border-top: 1px dashed var(--wow-border); }
.wow-vc-diff__line--hunk .wow-vc-diff__content { color: var(--wow-accent); }

/* --- components/audit-log/audit-log.css --- */
/* ----------------------------------------------------------------
   Audit Log — registro de eventos de auditoría (quién / qué / cuándo)
   ---------------------------------------------------------------- */
.wow-audit {
  position: relative;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
}
/* Marca Hanez implícita */
.wow-audit::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  background-image: var(--wow-brand-logo);
  background-size: cover;
  background-position: center;
  border-radius: var(--wow-radius-sm);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Header */
.wow-audit__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  border-bottom: 1px solid var(--wow-border);
  flex-wrap: wrap;
}
.wow-audit__title {
  margin: 0;
  font-size: var(--wow-text-base);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
}
.wow-audit__title > i[data-lucide],
.wow-audit__title > svg { width: 16px; height: 16px; color: var(--wow-accent); }
.wow-audit__subtitle {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}
.wow-audit__filters {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  flex-wrap: wrap;
}

/* Lista */
.wow-audit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wow-audit__item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--wow-space-3);
  align-items: start;
  padding: var(--wow-space-3) var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
  transition: background var(--wow-transition-fast);
}
.wow-audit__item:last-child { border-bottom: none; }
.wow-audit__item:hover { background: var(--wow-surface-hover); }

/* Ícono redondo a la izquierda */
.wow-audit__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-full);
  background: var(--wow-bg-elevated);
  color: var(--wow-text-muted);
  border: 1px solid var(--wow-border-strong);
  flex-shrink: 0;
}
.wow-audit__icon > i[data-lucide],
.wow-audit__icon > svg { width: 14px; height: 14px; }

.wow-audit__icon--success { background: var(--wow-success-soft); color: var(--wow-success); border-color: var(--wow-success); }
.wow-audit__icon--warning { background: var(--wow-warning-soft); color: var(--wow-warning); border-color: var(--wow-warning); }
.wow-audit__icon--danger  { background: var(--wow-danger-soft);  color: var(--wow-danger);  border-color: var(--wow-danger); }
.wow-audit__icon--accent  { background: var(--wow-accent-soft);  color: var(--wow-accent);  border-color: var(--wow-accent); }

/* Contenido principal */
.wow-audit__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wow-audit__summary {
  font-size: var(--wow-text-sm);
  color: var(--wow-text);
  line-height: var(--wow-leading-tight);
  word-break: break-word;
}
.wow-audit__actor {
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}
.wow-audit__action { color: var(--wow-text-muted); }
.wow-audit__target {
  font-family: var(--wow-font-mono);
  font-size: 0.9em;
  color: var(--wow-accent);
  background: var(--wow-accent-soft);
  padding: 1px 6px;
  border-radius: var(--wow-radius-sm);
}

.wow-audit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wow-space-3);
  color: var(--wow-text-subtle);
  font-size: var(--wow-text-xs);
  margin-top: 2px;
}
.wow-audit__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wow-audit__meta i[data-lucide],
.wow-audit__meta svg { width: 11px; height: 11px; }
.wow-audit__meta .wow-audit__sep {
  width: 3px; height: 3px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-border-strong);
}

/* Badge de severidad a la derecha */
.wow-audit__severity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--wow-bg-elevated);
  color: var(--wow-text-muted);
  border: 1px solid var(--wow-border);
  white-space: nowrap;
  align-self: flex-start;
}
.wow-audit__severity--info    { background: var(--wow-accent-soft);  color: var(--wow-accent);  border-color: var(--wow-accent); }
.wow-audit__severity--success { background: var(--wow-success-soft); color: var(--wow-success); border-color: var(--wow-success); }
.wow-audit__severity--warning { background: var(--wow-warning-soft); color: var(--wow-warning); border-color: var(--wow-warning); }
.wow-audit__severity--danger  { background: var(--wow-danger-soft);  color: var(--wow-danger);  border-color: var(--wow-danger); }

/* Detalle expandible (diff / payload) */
.wow-audit__details {
  grid-column: 2 / -1;
  margin-top: var(--wow-space-2);
  padding: var(--wow-space-3);
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  white-space: pre-wrap;
  overflow-x: auto;
}
.wow-audit__diff-add {
  color: var(--wow-success);
  background: var(--wow-success-soft);
  display: block;
  padding: 0 var(--wow-space-2);
  border-left: 2px solid var(--wow-success);
}
.wow-audit__diff-rm {
  color: var(--wow-danger);
  background: var(--wow-danger-soft);
  display: block;
  padding: 0 var(--wow-space-2);
  border-left: 2px solid var(--wow-danger);
  text-decoration: line-through;
  text-decoration-color: var(--wow-danger);
}

/* Variante compacta (una línea, sin meta expandido) */
.wow-audit--compact .wow-audit__item { padding: var(--wow-space-2) var(--wow-space-3); }
.wow-audit--compact .wow-audit__icon { width: 22px; height: 22px; }
.wow-audit--compact .wow-audit__icon > i[data-lucide],
.wow-audit--compact .wow-audit__icon > svg { width: 12px; height: 12px; }
.wow-audit--compact .wow-audit__item { grid-template-columns: 22px 1fr auto; }

/* Footer */
.wow-audit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wow-space-3) var(--wow-space-4);
  background: var(--wow-bg-elevated);
  border-top: 1px solid var(--wow-border);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  flex-wrap: wrap;
  gap: var(--wow-space-3);
}

/* Estado vacío */
.wow-audit__empty {
  padding: var(--wow-space-6) var(--wow-space-4);
  text-align: center;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
}
.wow-audit__empty > i[data-lucide],
.wow-audit__empty > svg { width: 32px; height: 32px; color: var(--wow-text-subtle); margin-bottom: var(--wow-space-2); }

/* --- components/accordion/accordion.css --- */
.wow-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-2);
}

.wow-accordion__item {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  overflow: hidden;
  transition: border-color var(--wow-transition-fast);
}
.wow-accordion__item--open { border-color: var(--wow-border-strong); }

.wow-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  width: 100%;
  padding: var(--wow-space-4);
  background: transparent;
  border: none;
  color: var(--wow-text);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--wow-transition-fast);
}
.wow-accordion__trigger:hover { background: var(--wow-surface-hover); }

.wow-accordion__trigger > i[data-lucide]:first-child,
.wow-accordion__trigger > svg:first-child {
  width: 16px;
  height: 16px;
  color: var(--wow-text-muted);
  flex-shrink: 0;
}

.wow-accordion__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.wow-accordion__chevron {
  color: var(--wow-text-subtle);
  transition: transform var(--wow-transition-fast);
  flex-shrink: 0;
}
.wow-accordion__chevron > i[data-lucide], .wow-accordion__chevron > svg { width: 14px; height: 14px; }
.wow-accordion__item--open .wow-accordion__chevron { transform: rotate(180deg); color: var(--wow-accent); }

.wow-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wow-transition-base);
}
.wow-accordion__item--open .wow-accordion__content { max-height: 1000px; }

.wow-accordion__body {
  padding: 0 var(--wow-space-4) var(--wow-space-4);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
  line-height: var(--wow-leading-normal);
  border-top: 1px solid var(--wow-border);
  padding-top: var(--wow-space-4);
  margin-top: var(--wow-space-1);
}

/* Variante plana (sin borde por item, solo divisores) */
.wow-accordion--flat {
  gap: 0;
}
.wow-accordion--flat .wow-accordion__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--wow-border);
  border-radius: 0;
}
.wow-accordion--flat .wow-accordion__item:last-child { border-bottom: none; }
.wow-accordion--flat .wow-accordion__trigger { padding-left: 0; padding-right: 0; }
.wow-accordion--flat .wow-accordion__body { padding-left: 0; padding-right: 0; border-top: none; padding-top: 0; margin-top: -var(--wow-space-2); }

/* --- components/stepper/stepper.css --- */
.wow-stepper {
  display: flex;
  gap: 0;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wow-stepper__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wow-space-2);
  position: relative;
  min-width: 0;
  padding: 0 var(--wow-space-2);
}

.wow-stepper__circle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--wow-surface);
  border: 2px solid var(--wow-border-strong);
  color: var(--wow-text-muted);
  border-radius: var(--wow-radius-full);
  font-family: var(--wow-font-sans);
  font-weight: var(--wow-weight-semibold);
  font-size: var(--wow-text-sm);
  flex-shrink: 0;
  z-index: 1;
  transition: all var(--wow-transition-fast);
}
.wow-stepper__circle > i[data-lucide], .wow-stepper__circle > svg { width: 14px; height: 14px; }

.wow-stepper__label {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  text-align: center;
  line-height: var(--wow-leading-tight);
  max-width: 140px;
}
.wow-stepper__label-sub {
  display: block;
  color: var(--wow-text-subtle);
  font-size: 10px;
  margin-top: 2px;
}

/* Conector entre pasos */
.wow-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--wow-border-strong);
  z-index: 0;
}

/* Estados */
.wow-stepper__step--done .wow-stepper__circle {
  background: var(--wow-accent);
  border-color: var(--wow-accent);
  color: var(--wow-text-inverse);
}
.wow-stepper__step--done::after { background: var(--wow-accent); }
.wow-stepper__step--done .wow-stepper__label { color: var(--wow-text); }

.wow-stepper__step--current .wow-stepper__circle {
  background: var(--wow-accent-soft);
  border-color: var(--wow-accent);
  color: var(--wow-accent);
  box-shadow: var(--wow-shadow-glow);
}
.wow-stepper__step--current .wow-stepper__label {
  color: var(--wow-text-strong);
  font-weight: var(--wow-weight-medium);
}

.wow-stepper__step--error .wow-stepper__circle {
  background: var(--wow-danger-soft);
  border-color: var(--wow-danger);
  color: var(--wow-danger);
}

/* Vertical */
.wow-stepper--vertical {
  flex-direction: column;
  gap: var(--wow-space-4);
}
.wow-stepper--vertical .wow-stepper__step {
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  text-align: left;
}
.wow-stepper--vertical .wow-stepper__label {
  text-align: left;
  max-width: none;
  padding-top: 4px;
}
.wow-stepper--vertical .wow-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 15px;
  right: auto;
  bottom: calc(-1 * var(--wow-space-4));
  width: 2px;
  height: auto;
}

/* --- components/upload/upload.css --- */
.wow-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-8) var(--wow-space-5);
  background: var(--wow-surface);
  border: 2px dashed var(--wow-border-strong);
  border-radius: var(--wow-radius-lg);
  color: var(--wow-text);
  text-align: center;
  transition: border-color var(--wow-transition-fast), background var(--wow-transition-fast);
  cursor: pointer;
}
.wow-dropzone:hover { border-color: var(--wow-accent); background: var(--wow-surface-hover); }
.wow-dropzone--active {
  border-color: var(--wow-accent);
  border-style: solid;
  background: var(--wow-accent-soft);
}
.wow-dropzone--error { border-color: var(--wow-danger); background: var(--wow-danger-soft); }

.wow-dropzone__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
  color: var(--wow-accent);
  margin-bottom: var(--wow-space-2);
}
.wow-dropzone__icon > i[data-lucide], .wow-dropzone__icon > svg { width: 22px; height: 22px; }

.wow-dropzone__title {
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-strong);
}
.wow-dropzone__hint {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
}
.wow-dropzone__link {
  color: var(--wow-accent);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
}

/* Compacto */
.wow-dropzone--compact {
  padding: var(--wow-space-4);
  flex-direction: row;
  gap: var(--wow-space-3);
  text-align: left;
  align-items: center;
}
.wow-dropzone--compact .wow-dropzone__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
}
.wow-dropzone--compact .wow-dropzone__icon > i[data-lucide] { width: 18px; height: 18px; }
.wow-dropzone--compact .wow-dropzone__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ----- Lista de archivos subidos ----- */
.wow-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--wow-space-2);
  margin-top: var(--wow-space-3);
}

.wow-file {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
}
.wow-file__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  border-radius: var(--wow-radius-md);
  flex-shrink: 0;
}
.wow-file__icon > i[data-lucide] { width: 16px; height: 16px; }

.wow-file__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wow-file__name {
  color: var(--wow-text);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wow-file__meta {
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  display: flex;
  gap: var(--wow-space-2);
}

.wow-file__remove {
  background: transparent;
  border: none;
  color: var(--wow-text-subtle);
  cursor: pointer;
  padding: var(--wow-space-1);
  display: grid;
  place-items: center;
  border-radius: var(--wow-radius-sm);
}
.wow-file__remove:hover { color: var(--wow-danger); background: var(--wow-danger-soft); }
.wow-file__remove > i[data-lucide] { width: 14px; height: 14px; }

.wow-file__progress {
  width: 100%;
  height: 4px;
  background: var(--wow-surface-hover);
  border-radius: var(--wow-radius-full);
  overflow: hidden;
  margin-top: var(--wow-space-1);
}
.wow-file__progress-bar {
  height: 100%;
  background: var(--wow-accent);
  border-radius: var(--wow-radius-full);
}
.wow-file--error { border-color: var(--wow-danger); }
.wow-file--error .wow-file__icon { background: var(--wow-danger-soft); color: var(--wow-danger); }
.wow-file--done .wow-file__icon { background: var(--wow-success-soft); color: var(--wow-success); }

/* --- components/calendar/calendar.css --- */
.wow-calendar {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
  font-family: var(--wow-font-sans);
}

.wow-calendar__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-3) var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
}
.wow-calendar__title {
  flex: 1;
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
}
.wow-calendar__nav {
  background: transparent;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--wow-text);
  cursor: pointer;
}
.wow-calendar__nav:hover { background: var(--wow-surface-hover); }
.wow-calendar__nav > i[data-lucide] { width: 14px; height: 14px; }

.wow-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.wow-calendar__dow {
  padding: var(--wow-space-2) 0;
  text-align: center;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--wow-border);
}

.wow-calendar__day {
  position: relative;
  min-height: 80px;
  padding: var(--wow-space-2);
  background: transparent;
  border: none;
  border-right: 1px solid var(--wow-border);
  border-bottom: 1px solid var(--wow-border);
  color: var(--wow-text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}
.wow-calendar__day:nth-child(7n) { border-right: none; }
.wow-calendar__day:hover { background: var(--wow-surface-hover); }

.wow-calendar__day--other { color: var(--wow-text-subtle); background: var(--wow-bg-elevated); }
.wow-calendar__day--today .wow-calendar__day-num {
  background: var(--wow-accent);
  color: var(--wow-text-inverse);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wow-radius-full);
  font-weight: var(--wow-weight-semibold);
  font-size: var(--wow-text-xs);
}
.wow-calendar__day--selected { background: var(--wow-accent-soft); }
.wow-calendar__day--selected .wow-calendar__day-num { color: var(--wow-accent); font-weight: var(--wow-weight-semibold); }

.wow-calendar__day-num {
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
}

.wow-calendar__event {
  font-size: var(--wow-text-xs);
  padding: 2px var(--wow-space-1);
  background: var(--wow-accent-soft);
  color: var(--wow-accent);
  border-radius: var(--wow-radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wow-calendar__event--warning { background: var(--wow-warning-soft); color: var(--wow-warning); }
.wow-calendar__event--danger  { background: var(--wow-danger-soft);  color: var(--wow-danger); }
.wow-calendar__event--success { background: var(--wow-success-soft); color: var(--wow-success); }

.wow-calendar__more {
  font-size: 10px;
  color: var(--wow-text-subtle);
  padding: 0 var(--wow-space-1);
}

/* Mini calendar (compacto) */
.wow-calendar--mini .wow-calendar__day {
  min-height: auto;
  padding: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  font-size: var(--wow-text-sm);
  border: none;
}
.wow-calendar--mini .wow-calendar__day-num {
  font-size: var(--wow-text-sm);
}
.wow-calendar--mini .wow-calendar__event,
.wow-calendar--mini .wow-calendar__more { display: none; }
.wow-calendar--mini .wow-calendar__day--has-event::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: var(--wow-radius-full);
  background: var(--wow-accent);
  position: absolute;
  bottom: 4px;
  left: 50%;
  margin-left: -2px;
}

/* --- components/code/code.css --- */
.wow-code {
  background: var(--wow-bg);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-xs);
  color: var(--wow-text);
  position: relative;
  overflow: hidden;
}

.wow-code__header {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  padding: var(--wow-space-2) var(--wow-space-3);
  background: var(--wow-bg-elevated);
  border-bottom: 1px solid var(--wow-border);
  color: var(--wow-text-muted);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
}
.wow-code__lang {
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text);
}
.wow-code__actions { margin-left: auto; display: flex; gap: var(--wow-space-1); }

.wow-code__copy {
  background: transparent;
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  color: var(--wow-text-muted);
  padding: 2px var(--wow-space-2);
  font-family: var(--wow-font-sans);
  font-size: var(--wow-text-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wow-code__copy:hover { color: var(--wow-text); border-color: var(--wow-border-strong); }
.wow-code__copy > i[data-lucide] { width: 12px; height: 12px; }

.wow-code__body {
  padding: var(--wow-space-3) var(--wow-space-4);
  overflow-x: auto;
  line-height: var(--wow-leading-relaxed);
}
.wow-code__body pre { margin: 0; white-space: pre; }

/* Inline */
code.wow-code-inline {
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-sm);
  padding: 2px 6px;
  font-family: var(--wow-font-mono);
  font-size: 0.85em;
  color: var(--wow-accent);
}

/* Numeración de líneas */
.wow-code--numbered .wow-code__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--wow-space-3);
  padding-left: var(--wow-space-3);
}
.wow-code__lineno {
  color: var(--wow-text-subtle);
  text-align: right;
  user-select: none;
  white-space: pre;
}

/* Tonos de sintaxis minimalistas */
.wow-code-kw  { color: var(--wow-accent); }
.wow-code-str { color: var(--wow-success); }
.wow-code-num { color: var(--wow-warning); }
.wow-code-com { color: var(--wow-text-subtle); font-style: italic; }
.wow-code-fn  { color: #C084FC; }

/* --- components/language/language.css --- */
/* Language — selector y badges de idioma */

.wow-lang-switcher {
  display: inline-flex;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  padding: var(--wow-space-1);
  gap: 2px;
}

.wow-lang-switcher__option {
  display: flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: var(--wow-space-1) var(--wow-space-3);
  border: none;
  border-radius: var(--wow-radius-md);
  background: transparent;
  color: var(--wow-text-muted);
  font-size: var(--wow-text-sm);
  font-family: var(--wow-font-sans);
  font-weight: var(--wow-weight-medium);
  cursor: pointer;
  transition: all var(--wow-transition-fast);
}

.wow-lang-switcher__option:hover {
  color: var(--wow-text);
  background: var(--wow-surface-hover);
}

.wow-lang-switcher__option--active {
  color: var(--wow-text-strong);
  background: var(--wow-bg-elevated);
  box-shadow: var(--wow-shadow-sm);
}

.wow-lang-switcher__flag {
  font-size: var(--wow-text-base);
  line-height: 1;
}

/* Badge de idioma */
.wow-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-1);
  padding: var(--wow-space-1) var(--wow-space-2);
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-full);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-muted);
}

.wow-lang-badge__flag {
  font-size: var(--wow-text-base);
  line-height: 1;
}

.wow-lang-badge--active {
  border-color: var(--wow-accent);
  color: var(--wow-accent);
  background: var(--wow-accent-soft);
}

/* Lista de idiomas */
.wow-lang-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  overflow: hidden;
}

.wow-lang-list__item {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  padding: var(--wow-space-3) var(--wow-space-4);
  border-bottom: 1px solid var(--wow-border);
  cursor: pointer;
  transition: background var(--wow-transition-fast);
}

.wow-lang-list__item:last-child {
  border-bottom: none;
}

.wow-lang-list__item:hover {
  background: var(--wow-surface-hover);
}

.wow-lang-list__item--active {
  background: var(--wow-accent-soft);
}

.wow-lang-list__flag {
  font-size: var(--wow-text-xl);
  line-height: 1;
}

.wow-lang-list__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wow-lang-list__name {
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-medium);
  color: var(--wow-text-strong);
}

.wow-lang-list__native {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}

.wow-lang-list__check {
  color: var(--wow-accent);
  width: 18px;
  height: 18px;
}

/* Barra de progreso de traducción */
.wow-lang-progress {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
}

.wow-lang-progress__bar {
  flex: 1;
  height: 4px;
  background: var(--wow-border);
  border-radius: var(--wow-radius-full);
  overflow: hidden;
}

.wow-lang-progress__fill {
  height: 100%;
  border-radius: var(--wow-radius-full);
  background: var(--wow-accent);
  transition: width var(--wow-transition-base);
}

.wow-lang-progress__fill--complete {
  background: var(--wow-success);
}

.wow-lang-progress__fill--warning {
  background: var(--wow-warning);
}

.wow-lang-progress__label {
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* --- components/rating/rating.css --- */
/* Rating — estrellas y valoración */

.wow-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.wow-rating__star {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--wow-border-strong);
  transition: color var(--wow-transition-fast), transform var(--wow-transition-fast);
}

.wow-rating__star:hover {
  transform: scale(1.15);
}

.wow-rating__star > i[data-lucide],
.wow-rating__star > svg {
  width: 100%;
  height: 100%;
}

.wow-rating__star--filled {
  color: var(--wow-warning);
}

.wow-rating__star--half {
  color: var(--wow-warning);
  opacity: 0.5;
}

.wow-rating--hover .wow-rating__star--hover-fill {
  color: var(--wow-warning);
}

/* Tamaños */
.wow-rating--sm .wow-rating__star { width: 18px; height: 18px; }
.wow-rating--lg .wow-rating__star { width: 32px; height: 32px; }
.wow-rating--xl .wow-rating__star { width: 40px; height: 40px; }

/* Readonly */
.wow-rating--readonly .wow-rating__star {
  cursor: default;
}

.wow-rating--readonly .wow-rating__star:hover {
  transform: none;
}

/* Con valor numérico */
.wow-rating__value {
  margin-left: var(--wow-space-2);
  font-size: var(--wow-text-sm);
  font-weight: var(--wow-weight-semibold);
  color: var(--wow-text-strong);
  font-variant-numeric: tabular-nums;
}

.wow-rating__count {
  margin-left: var(--wow-space-1);
  font-size: var(--wow-text-xs);
  color: var(--wow-text-muted);
}

/* Variante emoji (para ánimo) */
.wow-rating-emoji {
  display: inline-flex;
  gap: var(--wow-space-2);
}

.wow-rating-emoji__option {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wow-text-xl);
  background: var(--wow-surface);
  border: 2px solid var(--wow-border);
  border-radius: var(--wow-radius-lg);
  cursor: pointer;
  transition: all var(--wow-transition-fast);
}

.wow-rating-emoji__option:hover {
  border-color: var(--wow-border-strong);
  transform: scale(1.1);
}

.wow-rating-emoji__option--active {
  border-color: var(--wow-accent);
  background: var(--wow-accent-soft);
  transform: scale(1.1);
}

/* Barra de distribución */
.wow-rating-bar {
  display: flex;
  align-items: center;
  gap: var(--wow-space-2);
  font-size: var(--wow-text-xs);
}

.wow-rating-bar__label {
  color: var(--wow-text-muted);
  min-width: 14px;
  text-align: right;
}

.wow-rating-bar__track {
  flex: 1;
  height: 6px;
  background: var(--wow-border);
  border-radius: var(--wow-radius-full);
  overflow: hidden;
}

.wow-rating-bar__fill {
  height: 100%;
  background: var(--wow-warning);
  border-radius: var(--wow-radius-full);
}

.wow-rating-bar__count {
  color: var(--wow-text-subtle);
  min-width: 28px;
  font-variant-numeric: tabular-nums;
}

/* --- components/copy-button/copy-button.css --- */
/* Copy Button — copiar al portapapeles */

.wow-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--wow-space-2);
}

.wow-copy__value {
  font-family: var(--wow-font-mono);
  font-size: var(--wow-text-sm);
  color: var(--wow-text);
  padding: var(--wow-space-1) var(--wow-space-2);
  background: var(--wow-bg-elevated);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  user-select: all;
}

.wow-copy__btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--wow-surface);
  border: 1px solid var(--wow-border);
  border-radius: var(--wow-radius-md);
  color: var(--wow-text-muted);
  cursor: pointer;
  transition: all var(--wow-transition-fast);
}

.wow-copy__btn:hover {
  background: var(--wow-surface-hover);
  color: var(--wow-text);
  border-color: var(--wow-border-strong);
}

.wow-copy__btn > i[data-lucide],
.wow-copy__btn > svg {
  width: 14px;
  height: 14px;
}

.wow-copy__btn--copied {
  color: var(--wow-success);
  border-color: var(--wow-success);
  background: var(--wow-success-soft);
}

/* Variante inline (solo botón, sin valor visible) */
.wow-copy--inline {
  gap: var(--wow-space-1);
}

.wow-copy--inline .wow-copy__value {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--wow-font-sans);
}

/* Variante bloque (input + botón) */
.wow-copy--block {
  width: 100%;
}

.wow-copy--block .wow-copy__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tooltip de confirmación */
.wow-copy__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--wow-success);
  color: var(--wow-text-inverse);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  padding: 2px var(--wow-space-2);
  border-radius: var(--wow-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--wow-transition-fast);
}

.wow-copy__btn--copied .wow-copy__tooltip {
  opacity: 1;
}

/* --- components/divider/divider.css --- */
.wow-divider {
  height: 1px;
  background: var(--wow-border);
  border: none;
  margin: var(--wow-space-4) 0;
}

.wow-divider--strong { background: var(--wow-border-strong); }

.wow-divider--vertical {
  height: auto;
  width: 1px;
  align-self: stretch;
  margin: 0 var(--wow-space-3);
}

/* Con label en el medio */
.wow-divider-label {
  display: flex;
  align-items: center;
  gap: var(--wow-space-3);
  color: var(--wow-text-muted);
  font-size: var(--wow-text-xs);
  font-weight: var(--wow-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--wow-space-4) 0;
}
.wow-divider-label::before,
.wow-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wow-border);
}