/* =========================================================
   CAMPOL DESIGN SYSTEM (CDS) v1.5.1 — Unified Stylesheet
   Reemplaza: app.css, app2.css, app3.css, app4.css, app5.css,
              app6.css, app7.css, app8.css, login.css
   Temas: 11 paletas mediante [data-theme="..."]

   Cambios v1.5.1 (respecto a v1.5):
   - SECCIÓN 76 (NUEVA): Fix responsive específico de la vista de
     Permisos (permission-management.blade.php). La tabla de permisos
     y los filtros no se reacomodaban bien en móvil porque los `<select>`
     del row de filtros (col-md-3 + col-md-1) se salían del viewport y
     el icono del permiso (40x40) empujaba el nombre fuera de la celda.
   - Se añade `.cds-permission-table` con degradación a tarjetas en
     xs, sticky first column en sm, y truncado del nombre del permiso
     con `word-break: break-word` para evitar overflow.
   - Se añade `.cds-permission-filters` para que el row de filtros
     haga wrap correctamente y los selects ocupen 100% en móvil.
   - Se añade `.cds-badge-count` para los badges de roles/usuarios en
     la tabla de permisos que se desbordaban.
   - Se añade `.cds-avatar-cell` para el avatar 40x40 + texto al lado
     que rompía el layout en pantallas pequeñas.

   Cambios v1.5 (respecto a v1.4):
   - SECCIÓN 51 (NUEVA): Responsive mobile-first completo con
     breakpoints finos (xs, sm, md, lg, xl, xxl).
   - SECCIÓN 52 (NUEVA): Mejoras específicas para celular —
     touch targets 44px, safe areas iOS, scroll horizontal
     controlado, tipografía fluida con clamp().
   - SECCIÓN 53 (NUEVA): Sidebar mobile mejorado con swipe,
     overlay con blur, animaciones suaves.
   - SECCIÓN 54 (NUEVA): Tablas responsive — cards en móvil,
     scroll horizontal, sticky columns.
   - SECCIÓN 55 (NUEVA): Charts responsive — altura adaptativa,
     reflow de leyendas.
   - SECCIÓN 56 (NUEVA): Navbar mobile — search full width,
     acciones colapsadas, breadcrumb oculto.
   - SECCIÓN 57 (NUEVA): Stat cards responsive — grid 2x2 en
     tablet, 1 col en móvil pequeño.
   - SECCIÓN 58 (NUEVA): Forms responsive — inputs full width,
     botones apilados, floating labels en touch.
   - SECCIÓN 59 (NUEVA): Modales full-screen en móvil.
   - SECCIÓN 60 (NUEVA): Theme drawer responsive refinado.
   - SECCIÓN 61 (NUEVA): Dashboard content padding adaptativo.
   - SECCIÓN 62 (NUEVA): Animaciones reducidas en móvil para
     rendimiento.
   - SECCIÓN 63 (NUEVA): Orientación landscape/portrait.
   - SECCIÓN 64 (NUEVA): Print mejorado.
   - SECCIÓN 65 (NUEVA): Utilidades responsive adicionales.
   - SECCIÓN 66 (NUEVA): Fixes finales de responsive crítico.
   - SECCIÓN 67 (NUEVA): Botones unificados — fix de apilado,
     variantes y estados consistentes en todas las vistas.
   - SECCIÓN 68 (NUEVA): Tablas CDS — sticky headers, cards
     móvil, acciones consistentes, scroll shadow.
   - SECCIÓN 69 (NUEVA): Formularios CDS — floating labels,
     file inputs, validación visual, password strength.
   - SECCIÓN 70 (NUEVA): Navbar/sidebar del dashboard —
     consistencia total, theme toggle, user dropdown.
   - SECCIÓN 71 (NUEVA): Chart containers — wrappers estables
     con altura responsive y leyendas reflow.
   - SECCIÓN 72 (NUEVA): Stat cards dashboard — formato
     unificado con icon-bg-color y bordes consistente.
   - SECCIÓN 73 (NUEVA): Modales CDS — behavior unificado,
     full-screen móvil, scroll interno.
   - SECCIÓN 74 (NUEVA): Alerts/Toasts unificados con iconos
     y colores consistentes.
   - SECCIÓN 75 (NUEVA): Livewire loading states y wire:ignore
     wrappers.
   ========================================================= */

/* ---------------------------------------------------------
   0. TOKENS BASE (tipografía, espaciado, radios, transiciones)
   --------------------------------------------------------- */
:root{
  --cds-font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cds-font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --cds-fs-3xs:.625rem;
  --cds-fs-2xs:.6875rem;
  --cds-fs-xs:.75rem;
  --cds-fs-sm:.8125rem;
  --cds-fs-md:.875rem;
  --cds-fs-lg:1rem;
  --cds-fs-xl:1.125rem;
  --cds-fs-2xl:1.25rem;
  --cds-fs-3xl:1.5rem;
  --cds-fs-4xl:1.875rem;
  --cds-fs-5xl:2.25rem;

  --cds-lh-tight:1.15;
  --cds-lh-snug:1.3;
  --cds-lh-normal:1.5;
  --cds-lh-relaxed:1.65;

  --cds-fw-light:300;
  --cds-fw-normal:400;
  --cds-fw-medium:500;
  --cds-fw-semibold:600;
  --cds-fw-bold:700;
  --cds-fw-extrabold:800;

  --cds-sp-1:4px;
  --cds-sp-2:8px;
  --cds-sp-3:12px;
  --cds-sp-4:16px;
  --cds-sp-5:20px;
  --cds-sp-6:24px;
  --cds-sp-8:32px;
  --cds-sp-10:40px;
  --cds-sp-12:48px;
  --cds-sp-16:64px;

  --cds-r-xs:4px;
  --cds-r-sm:6px;
  --cds-r-md:8px;
  --cds-r-lg:12px;
  --cds-r-xl:16px;
  --cds-r-2xl:20px;
  --cds-r-full:9999px;

  --cds-t-fast:120ms cubic-bezier(.4,0,.2,1);
  --cds-t-base:200ms cubic-bezier(.4,0,.2,1);
  --cds-t-slow:320ms cubic-bezier(.4,0,.2,1);
  --cds-t-spring:400ms cubic-bezier(.175,.885,.32,1.275);

  --cds-sidebar-w:280px;
  --cds-sidebar-w-collapsed:80px;
  --cds-navbar-h:64px;

  /* Touch target mínimo recomendado por WCAG/Apple */
  --cds-touch-target:44px;

  /* Safe areas (iOS notch / home indicator) */
  --cds-safe-top:env(safe-area-inset-top, 0px);
  --cds-safe-right:env(safe-area-inset-right, 0px);
  --cds-safe-bottom:env(safe-area-inset-bottom, 0px);
  --cds-safe-left:env(safe-area-inset-left, 0px);

  /* Flechas de select (compartidas entre temas) */
  --cds-select-arrow-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --cds-select-arrow-dark:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --cds-select-arrow-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  /* ====== ALIASES LEGACY (compatibilidad total) ====== */
  --rojo-principal: var(--cds-primary);
  --rojo-degradado: var(--cds-primary-hover);
  --rojo-oscuro: var(--cds-primary-active);
  --rojo-claro: var(--cds-primary-soft);
  --rojo-suave: var(--cds-bg);
  --azul-principal: var(--cds-primary);
  --azul-degradado: var(--cds-primary-hover);
  --azul-oscuro: var(--cds-primary-active);
  --azul-claro: var(--cds-primary-soft);
  --azul-suave: var(--cds-bg);
  --verde-principal: var(--cds-success);
  --verde-degradado: var(--cds-success);
  --verde-oscuro: var(--cds-success-fg);
  --verde-claro: var(--cds-success-soft);
  --verde-suave: var(--cds-bg);
  --azul-corporativo: var(--cds-primary);
  --azul-intenso: var(--cds-accent);
  --verde-corporativo: var(--cds-success);
  --ambar-corporativo: var(--cds-warning);
  --purpura-corporativo: var(--cds-accent);
  --cian-corporativo: var(--cds-info);
  --gradient-start: var(--cds-primary);
  --gradient-mid1: var(--cds-primary-hover);
  --gradient-mid2: var(--cds-primary-hover);
  --gradient-mid3: var(--cds-primary-active);
  --gradient-mid4: var(--cds-primary-active);
  --gradient-end: var(--cds-accent);

  --blanco: var(--cds-surface);
  --gris-claro: var(--cds-bg-alt);
  --gris-medio: var(--cds-border);
  --gris-oscuro: var(--cds-fg);
  --gris-corporativo: var(--cds-fg-muted);
  --gris-texto: var(--cds-fg);
  --gris-texto-light: var(--cds-fg-muted);
  --texto-principal: var(--cds-fg);
  --texto-secundario: var(--cds-fg-muted);
  --verde: var(--cds-success);
  --azul: var(--cds-accent);
  --ambar: var(--cds-warning);
  --naranja: var(--cds-warning);
  --amarillo: var(--cds-warning);
  --cian: var(--cds-info);
  --purpura: var(--cds-accent);
  --rojo: var(--cds-danger);

  --border-radius: var(--cds-r-lg);
  --border-radius-lg: var(--cds-r-xl);
  --border-radius-sm: var(--cds-r-md);
  --sombra-suave: var(--cds-shadow-xs);
  --sombra-media: var(--cds-shadow-md);
  --sombra-intensa: var(--cds-shadow-xl);
  --transition: var(--cds-t-base);
  --transition-bounce: var(--cds-t-spring);
}

/* ---------------------------------------------------------
   1. PALETAS DE TEMAS
   --------------------------------------------------------- */
[data-theme="empresarial"]{
  --cds-primary:#2563eb; --cds-primary-hover:#1d4ed8; --cds-primary-active:#1e40af;
  --cds-primary-soft:#dbeafe; --cds-primary-soft-fg:#1e40af; --cds-primary-fg:#ffffff;
  --cds-accent:#0ea5e9; --cds-accent-soft:#e0f2fe; --cds-accent-fg:#075985;
  --cds-success:#16a34a; --cds-success-soft:#dcfce7; --cds-success-fg:#166534;
  --cds-warning:#f59e0b; --cds-warning-soft:#fef3c7; --cds-warning-fg:#92400e;
  --cds-danger:#dc2626; --cds-danger-soft:#fee2e2; --cds-danger-fg:#991b1b;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#f6f8fb; --cds-bg-alt:#eef2f8; --cds-surface:#ffffff; --cds-surface-2:#f9fafb;
  --cds-border:#e2e8f0; --cds-border-strong:#cbd5e1;
  --cds-fg:#0f172a; --cds-fg-muted:#475569; --cds-fg-subtle:#94a3b8; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --cds-shadow-sm:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --cds-shadow-md:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --cds-shadow-lg:0 10px 30px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --cds-shadow-xl:0 24px 48px rgba(15,23,42,.18);
  --cds-gradient-brand:linear-gradient(135deg,#2563eb 0%, #0ea5e9 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #f6f8fb 100%);
}

[data-theme="moderno"]{
  --cds-primary:#7c3aed; --cds-primary-hover:#6d28d9; --cds-primary-active:#5b21b6;
  --cds-primary-soft:#ede9fe; --cds-primary-soft-fg:#5b21b6; --cds-primary-fg:#ffffff;
  --cds-accent:#ec4899; --cds-accent-soft:#fce7f3; --cds-accent-fg:#9d174d;
  --cds-success:#10b981; --cds-success-soft:#d1fae5; --cds-success-fg:#065f46;
  --cds-warning:#f59e0b; --cds-warning-soft:#fef3c7; --cds-warning-fg:#92400e;
  --cds-danger:#ef4444; --cds-danger-soft:#fee2e2; --cds-danger-fg:#991b1b;
  --cds-info:#06b6d4; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#fafafa; --cds-bg-alt:#f4f4f5; --cds-surface:#ffffff; --cds-surface-2:#fafafa;
  --cds-border:#e4e4e7; --cds-border-strong:#d4d4d8;
  --cds-fg:#18181b; --cds-fg-muted:#52525b; --cds-fg-subtle:#a1a1aa; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(24,24,27,.04);
  --cds-shadow-sm:0 1px 3px rgba(24,24,27,.06), 0 1px 2px rgba(24,24,27,.03);
  --cds-shadow-md:0 6px 16px rgba(24,24,27,.08);
  --cds-shadow-lg:0 16px 40px rgba(24,24,27,.12);
  --cds-shadow-xl:0 28px 56px rgba(24,24,27,.18);
  --cds-gradient-brand:linear-gradient(135deg,#7c3aed 0%, #ec4899 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #fafafa 100%);
}

[data-theme="oscuro"]{
  --cds-primary:#60a5fa; --cds-primary-hover:#3b82f6; --cds-primary-active:#2563eb;
  --cds-primary-soft:#1e3a8a; --cds-primary-soft-fg:#dbeafe; --cds-primary-fg:#0b1220;
  --cds-accent:#22d3ee; --cds-accent-soft:#155e75; --cds-accent-fg:#cffafe;
  --cds-success:#34d399; --cds-success-soft:#064e3b; --cds-success-fg:#a7f3d0;
  --cds-warning:#fbbf24; --cds-warning-soft:#78350f; --cds-warning-fg:#fde68a;
  --cds-danger:#f87171; --cds-danger-soft:#7f1d1d; --cds-danger-fg:#fecaca;
  --cds-info:#38bdf8; --cds-info-soft:#0c4a6e; --cds-info-fg:#bae6fd;
  --cds-bg:#0b1220; --cds-bg-alt:#0f1a2e; --cds-surface:#131e35; --cds-surface-2:#0f1a2e;
  --cds-border:#1e2a44; --cds-border-strong:#2a3b5f;
  --cds-fg:#e6eefb; --cds-fg-muted:#94a3b8; --cds-fg-subtle:#64748b; --cds-fg-inverse:#0b1220;
  --cds-shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --cds-shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --cds-shadow-md:0 6px 16px rgba(0,0,0,.5);
  --cds-shadow-lg:0 16px 40px rgba(0,0,0,.6);
  --cds-shadow-xl:0 28px 56px rgba(0,0,0,.7);
  --cds-gradient-brand:linear-gradient(135deg,#1e3a8a 0%, #0e7490 100%);
  --cds-gradient-surface:linear-gradient(180deg,#131e35 0%, #0b1220 100%);
}

[data-theme="claro"]{
  --cds-primary:#0f172a; --cds-primary-hover:#1e293b; --cds-primary-active:#020617;
  --cds-primary-soft:#f1f5f9; --cds-primary-soft-fg:#0f172a; --cds-primary-fg:#ffffff;
  --cds-accent:#6366f1; --cds-accent-soft:#eef2ff; --cds-accent-fg:#3730a3;
  --cds-success:#059669; --cds-success-soft:#d1fae5; --cds-success-fg:#065f46;
  --cds-warning:#d97706; --cds-warning-soft:#fef3c7; --cds-warning-fg:#78350f;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0e7490; --cds-info-soft:#cffafe; --cds-info-fg:#083344;
  --cds-bg:#ffffff; --cds-bg-alt:#f8fafc; --cds-surface:#ffffff; --cds-surface-2:#f8fafc;
  --cds-border:#e5e7eb; --cds-border-strong:#d1d5db;
  --cds-fg:#0f172a; --cds-fg-muted:#475569; --cds-fg-subtle:#94a3b8; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --cds-shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --cds-shadow-md:0 4px 12px rgba(15,23,42,.06);
  --cds-shadow-lg:0 10px 30px rgba(15,23,42,.08);
  --cds-shadow-xl:0 24px 48px rgba(15,23,42,.12);
  --cds-gradient-brand:linear-gradient(135deg,#0f172a 0%, #334155 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}

[data-theme="azul"]{
  --cds-primary:#1e40af; --cds-primary-hover:#1d4ed8; --cds-primary-active:#1e3a8a;
  --cds-primary-soft:#dbeafe; --cds-primary-soft-fg:#1e3a8a; --cds-primary-fg:#ffffff;
  --cds-accent:#0891b2; --cds-accent-soft:#cffafe; --cds-accent-fg:#155e75;
  --cds-success:#15803d; --cds-success-soft:#dcfce7; --cds-success-fg:#14532d;
  --cds-warning:#ca8a04; --cds-warning-soft:#fef9c3; --cds-warning-fg:#713f12;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0e7490; --cds-info-soft:#cffafe; --cds-info-fg:#083344;
  --cds-bg:#eff6ff; --cds-bg-alt:#dbeafe; --cds-surface:#ffffff; --cds-surface-2:#f8fbff;
  --cds-border:#bfdbfe; --cds-border-strong:#93c5fd;
  --cds-fg:#0c1e3e; --cds-fg-muted:#3b5583; --cds-fg-subtle:#7c93b8; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(30,58,138,.06);
  --cds-shadow-sm:0 1px 3px rgba(30,58,138,.10);
  --cds-shadow-md:0 4px 12px rgba(30,58,138,.12);
  --cds-shadow-lg:0 10px 30px rgba(30,58,138,.16);
  --cds-shadow-xl:0 24px 48px rgba(30,58,138,.22);
  --cds-gradient-brand:linear-gradient(135deg,#1e40af 0%, #0891b2 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #eff6ff 100%);
}

[data-theme="rojo"]{
  --cds-primary:#b91c1c; --cds-primary-hover:#dc2626; --cds-primary-active:#991b1b;
  --cds-primary-soft:#fee2e2; --cds-primary-soft-fg:#7f1d1d; --cds-primary-fg:#ffffff;
  --cds-accent:#ea580c; --cds-accent-soft:#ffedd5; --cds-accent-fg:#9a3412;
  --cds-success:#15803d; --cds-success-soft:#dcfce7; --cds-success-fg:#14532d;
  --cds-warning:#d97706; --cds-warning-soft:#fef3c7; --cds-warning-fg:#78350f;
  --cds-danger:#7f1d1d; --cds-danger-soft:#fecaca; --cds-danger-fg:#450a0a;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#fff5f5; --cds-bg-alt:#fee2e2; --cds-surface:#ffffff; --cds-surface-2:#fffafa;
  --cds-border:#fecaca; --cds-border-strong:#fca5a5;
  --cds-fg:#2a0808; --cds-fg-muted:#7c2d2d; --cds-fg-subtle:#b87777; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(127,29,29,.06);
  --cds-shadow-sm:0 1px 3px rgba(127,29,29,.10);
  --cds-shadow-md:0 4px 12px rgba(127,29,29,.12);
  --cds-shadow-lg:0 10px 30px rgba(127,29,29,.16);
  --cds-shadow-xl:0 24px 48px rgba(127,29,29,.22);
  --cds-gradient-brand:linear-gradient(135deg,#b91c1c 0%, #ea580c 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #fff5f5 100%);
}

[data-theme="amarillo"]{
  --cds-primary:#a16207; --cds-primary-hover:#854d0e; --cds-primary-active:#713f12;
  --cds-primary-soft:#fef9c3; --cds-primary-soft-fg:#713f12; --cds-primary-fg:#ffffff;
  --cds-accent:#ea580c; --cds-accent-soft:#ffedd5; --cds-accent-fg:#9a3412;
  --cds-success:#15803d; --cds-success-soft:#dcfce7; --cds-success-fg:#14532d;
  --cds-warning:#b45309; --cds-warning-soft:#fef3c7; --cds-warning-fg:#451a03;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#fffbeb; --cds-bg-alt:#fef3c7; --cds-surface:#ffffff; --cds-surface-2:#fffdf5;
  --cds-border:#fde68a; --cds-border-strong:#fcd34d;
  --cds-fg:#2a1a05; --cds-fg-muted:#7a5a1c; --cds-fg-subtle:#b89455; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(120,80,10,.06);
  --cds-shadow-sm:0 1px 3px rgba(120,80,10,.10);
  --cds-shadow-md:0 4px 12px rgba(120,80,10,.12);
  --cds-shadow-lg:0 10px 30px rgba(120,80,10,.16);
  --cds-shadow-xl:0 24px 48px rgba(120,80,10,.22);
  --cds-gradient-brand:linear-gradient(135deg,#a16207 0%, #ea580c 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #fffbeb 100%);
}

[data-theme="naranja"]{
  --cds-primary:#ea580c; --cds-primary-hover:#c2410c; --cds-primary-active:#9a3412;
  --cds-primary-soft:#ffedd5; --cds-primary-soft-fg:#9a3412; --cds-primary-fg:#ffffff;
  --cds-accent:#f59e0b; --cds-accent-soft:#fef3c7; --cds-accent-fg:#92400e;
  --cds-success:#15803d; --cds-success-soft:#dcfce7; --cds-success-fg:#14532d;
  --cds-warning:#b45309; --cds-warning-soft:#fef3c7; --cds-warning-fg:#451a03;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#fff7ed; --cds-bg-alt:#ffedd5; --cds-surface:#ffffff; --cds-surface-2:#fffaf5;
  --cds-border:#fed7aa; --cds-border-strong:#fdba74;
  --cds-fg:#2a1205; --cds-fg-muted:#7a3d12; --cds-fg-subtle:#b87a4d; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(154,52,18,.06);
  --cds-shadow-sm:0 1px 3px rgba(154,52,18,.10);
  --cds-shadow-md:0 4px 12px rgba(154,52,18,.12);
  --cds-shadow-lg:0 10px 30px rgba(154,52,18,.16);
  --cds-shadow-xl:0 24px 48px rgba(154,52,18,.22);
  --cds-gradient-brand:linear-gradient(135deg,#ea580c 0%, #f59e0b 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #fff7ed 100%);
}

[data-theme="verde"]{
  --cds-primary:#15803d; --cds-primary-hover:#166534; --cds-primary-active:#14532d;
  --cds-primary-soft:#dcfce7; --cds-primary-soft-fg:#14532d; --cds-primary-fg:#ffffff;
  --cds-accent:#0d9488; --cds-accent-soft:#ccfbf1; --cds-accent-fg:#115e59;
  --cds-success:#059669; --cds-success-soft:#d1fae5; --cds-success-fg:#065f46;
  --cds-warning:#ca8a04; --cds-warning-soft:#fef9c3; --cds-warning-fg:#713f12;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#f0fdf4; --cds-bg-alt:#dcfce7; --cds-surface:#ffffff; --cds-surface-2:#f7fdf9;
  --cds-border:#bbf7d0; --cds-border-strong:#86efac;
  --cds-fg:#052014; --cds-fg-muted:#14532d; --cds-fg-subtle:#6b9c7f; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(5,46,22,.06);
  --cds-shadow-sm:0 1px 3px rgba(5,46,22,.10);
  --cds-shadow-md:0 4px 12px rgba(5,46,22,.12);
  --cds-shadow-lg:0 10px 30px rgba(5,46,22,.16);
  --cds-shadow-xl:0 24px 48px rgba(5,46,22,.22);
  --cds-gradient-brand:linear-gradient(135deg,#15803d 0%, #0d9488 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #f0fdf4 100%);
}

[data-theme="morado"]{
  --cds-primary:#7c3aed; --cds-primary-hover:#6d28d9; --cds-primary-active:#5b21b6;
  --cds-primary-soft:#ede9fe; --cds-primary-soft-fg:#5b21b6; --cds-primary-fg:#ffffff;
  --cds-accent:#db2777; --cds-accent-soft:#fce7f3; --cds-accent-fg:#9d174d;
  --cds-success:#15803d; --cds-success-soft:#dcfce7; --cds-success-fg:#14532d;
  --cds-warning:#d97706; --cds-warning-soft:#fef3c7; --cds-warning-fg:#78350f;
  --cds-danger:#b91c1c; --cds-danger-soft:#fee2e2; --cds-danger-fg:#7f1d1d;
  --cds-info:#0891b2; --cds-info-soft:#cffafe; --cds-info-fg:#155e75;
  --cds-bg:#faf5ff; --cds-bg-alt:#f3e8ff; --cds-surface:#ffffff; --cds-surface-2:#fdfaff;
  --cds-border:#e9d5ff; --cds-border-strong:#d8b4fe;
  --cds-fg:#1e0a3f; --cds-fg-muted:#4c1d95; --cds-fg-subtle:#9d7bc9; --cds-fg-inverse:#ffffff;
  --cds-shadow-xs:0 1px 2px rgba(76,29,149,.06);
  --cds-shadow-sm:0 1px 3px rgba(76,29,149,.10);
  --cds-shadow-md:0 4px 12px rgba(76,29,149,.12);
  --cds-shadow-lg:0 10px 30px rgba(76,29,149,.16);
  --cds-shadow-xl:0 24px 48px rgba(76,29,149,.22);
  --cds-gradient-brand:linear-gradient(135deg,#7c3aed 0%, #db2777 100%);
  --cds-gradient-surface:linear-gradient(180deg,#ffffff 0%, #faf5ff 100%);
}

[data-theme="corporativo-oscuro"]{
  --cds-primary:#eab308; --cds-primary-hover:#facc15; --cds-primary-active:#ca8a04;
  --cds-primary-soft:#422006; --cds-primary-soft-fg:#fef9c3; --cds-primary-fg:#0b1220;
  --cds-accent:#f97316; --cds-accent-soft:#7c2d12; --cds-accent-fg:#ffedd5;
  --cds-success:#34d399; --cds-success-soft:#064e3b; --cds-success-fg:#a7f3d0;
  --cds-warning:#fbbf24; --cds-warning-soft:#78350f; --cds-warning-fg:#fde68a;
  --cds-danger:#f87171; --cds-danger-soft:#7f1d1d; --cds-danger-fg:#fecaca;
  --cds-info:#38bdf8; --cds-info-soft:#0c4a6e; --cds-info-fg:#bae6fd;
  --cds-bg:#0a1628; --cds-bg-alt:#0f1d33; --cds-surface:#15243d; --cds-surface-2:#0f1d33;
  --cds-border:#223350; --cds-border-strong:#31486b;
  --cds-fg:#f1f5f9; --cds-fg-muted:#94a3b8; --cds-fg-subtle:#64748b; --cds-fg-inverse:#0a1628;
  --cds-shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --cds-shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --cds-shadow-md:0 6px 16px rgba(0,0,0,.55);
  --cds-shadow-lg:0 16px 40px rgba(0,0,0,.65);
  --cds-shadow-xl:0 28px 56px rgba(0,0,0,.75);
  --cds-gradient-brand:linear-gradient(135deg,#0f1d33 0%, #ca8a04 100%);
  --cds-gradient-surface:linear-gradient(180deg,#15243d 0%, #0a1628 100%);
}

/* ---------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden}
body{
  font-family:var(--cds-font-sans);
  font-size:var(--cds-fs-md);
  line-height:var(--cds-lh-normal);
  color:var(--cds-fg);
  background:var(--cds-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color var(--cds-t-base), color var(--cds-t-base);
  overflow-x:hidden;
  font-weight:var(--cds-fw-normal);
  min-height:100vh;
  min-height:100dvh;
  max-width:100%;
}
a{color:var(--cds-primary);text-decoration:none;transition:color var(--cds-t-fast), opacity var(--cds-t-fast)}
a:hover{color:var(--cds-primary-hover)}
a:active{opacity:.85}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--cds-fw-semibold);line-height:var(--cds-lh-tight);color:var(--cds-fg);letter-spacing:-.01em}
h1{font-size:var(--cds-fs-4xl);letter-spacing:-.025em}
h2{font-size:var(--cds-fs-3xl);letter-spacing:-.02em}
h3{font-size:var(--cds-fs-2xl);letter-spacing:-.015em}
h4{font-size:var(--cds-fs-xl)}
h5{font-size:var(--cds-fs-lg)}
h6{font-size:var(--cds-fs-md)}
p{margin:0 0 var(--cds-sp-3)}
code,kbd,pre{font-family:var(--cds-font-mono);font-size:.875em}
img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 35%, transparent);border-radius:var(--cds-r-sm)}
::selection{background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--cds-bg-alt)}
::-webkit-scrollbar-thumb{background:var(--cds-border-strong);border-radius:var(--cds-r-full);transition:background var(--cds-t-fast)}
::-webkit-scrollbar-thumb:hover{background:var(--cds-fg-subtle)}

/* =========================================================
   3. LAYOUT PRINCIPAL (dashboard)
   ========================================================= */
.dashboard-container{display:flex;min-height:100vh;min-height:100dvh;position:relative;background:var(--cds-bg);max-width:100%}

/* ----- SIDEBAR ----- */
.sidebar{
  background:linear-gradient(180deg, var(--cds-primary-active) 0%, var(--cds-primary) 100%);
  color:var(--cds-primary-fg);
  width:var(--cds-sidebar-w);
  transition:width var(--cds-t-base), transform var(--cds-t-base);
  position:fixed;left:0;top:0;height:100vh;height:100dvh;
  z-index:1000;box-shadow:var(--cds-shadow-md);
  transform:translateX(0);
  display:flex;flex-direction:column;
  overflow:hidden;
  will-change:width, transform;
  padding-top:var(--cds-safe-top);
  padding-bottom:var(--cds-safe-bottom);
}
.sidebar.collapsed{width:var(--cds-sidebar-w-collapsed)}
.sidebar.mobile-hidden{transform:translateX(-100%)}
.sidebar.mobile-open{transform:translateX(0)}

.sidebar-header{
  padding:var(--cds-sp-5) var(--cds-sp-4);
  border-bottom:1px solid color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);
  text-align:center;transition:padding var(--cds-t-base);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  min-height:96px;
}
.sidebar.collapsed .sidebar-header{padding:var(--cds-sp-4) var(--cds-sp-2)}
.sidebar-logo{height:40px;transition:height var(--cds-t-base), transform var(--cds-t-spring);filter:brightness(0) invert(1);object-fit:contain;max-width:100%}
.sidebar-logo:hover{transform:scale(1.05)}
.sidebar.collapsed .sidebar-logo{height:32px}

.sidebar-menu{padding:var(--cds-sp-3) 0;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sidebar-menu::-webkit-scrollbar{width:4px}
.sidebar-menu::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}
.sidebar-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px;transition:background var(--cds-t-fast)}
.sidebar-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}

.menu-item{
  padding:var(--cds-sp-3) var(--cds-sp-4);
  color:color-mix(in srgb, var(--cds-primary-fg) 80%, transparent);
  text-decoration:none;
  display:flex;align-items:center;gap:var(--cds-sp-3);
  transition:background var(--cds-t-fast), color var(--cds-t-fast), border-left-color var(--cds-t-fast), padding var(--cds-t-fast);
  border-left:3px solid transparent;
  margin:2px 0;
  white-space:nowrap;
  cursor:pointer;
  position:relative;
  font-size:var(--cds-fs-sm);
  font-weight:var(--cds-fw-medium);
  min-height:var(--cds-touch-target);
}
.sidebar.collapsed .menu-item{padding:var(--cds-sp-3) var(--cds-sp-2);justify-content:center}
.menu-item:hover,.menu-item.active{
  background:color-mix(in srgb, var(--cds-primary-fg) 12%, transparent);
  color:var(--cds-primary-fg);
  border-left-color:color-mix(in srgb, var(--cds-primary-fg) 70%, transparent);
}
.menu-item.active{background:color-mix(in srgb, var(--cds-primary-fg) 18%, transparent)}
.menu-item:active{background:color-mix(in srgb, var(--cds-primary-fg) 22%, transparent)}
.menu-item i{width:20px;text-align:center;font-size:var(--cds-fs-lg);flex-shrink:0;transition:transform var(--cds-t-spring)}
.menu-item:hover i{transform:scale(1.1)}
.menu-text{transition:opacity var(--cds-t-base);opacity:1;visibility:visible}
.sidebar.collapsed .menu-text{opacity:0;visibility:hidden;position:absolute;pointer-events:none}

.sidebar-divider{height:1px;background:color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);margin:var(--cds-sp-3) var(--cds-sp-4)}
.sidebar.collapsed .sidebar-divider{margin:var(--cds-sp-3) var(--cds-sp-2)}

/* Submenús */
.menu-group{position:relative}
.menu-group .menu-item{cursor:pointer}
.menu-group .menu-item .fa-chevron-down{
  transition:transform var(--cds-t-base);
  font-size:var(--cds-fs-2xs);
  opacity:.7;margin-left:auto;
}
.menu-group .menu-item[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)}

.submenu{
  background:color-mix(in srgb, var(--cds-primary-active) 60%, transparent);
  border-left:3px solid transparent;
  transition:max-height var(--cds-t-base), opacity var(--cds-t-base);
  overflow:hidden;
}
.submenu-content{padding:var(--cds-sp-2) 0}
.submenu-item{
  padding:var(--cds-sp-2) var(--cds-sp-4) var(--cds-sp-2) calc(var(--cds-sp-4) + 28px);
  color:color-mix(in srgb, var(--cds-primary-fg) 70%, transparent);
  text-decoration:none;
  display:flex;align-items:center;gap:var(--cds-sp-3);
  transition:background var(--cds-t-fast), color var(--cds-t-fast), border-left-color var(--cds-t-fast), transform var(--cds-t-fast);
  border-left:3px solid transparent;
  font-size:var(--cds-fs-sm);
  position:relative;cursor:pointer;
  min-height:40px;
}
.submenu-item:hover,.submenu-item.active{
  background:color-mix(in srgb, var(--cds-primary-fg) 10%, transparent);
  color:var(--cds-primary-fg);
  border-left-color:color-mix(in srgb, var(--cds-primary-fg) 70%, transparent);
}
.submenu-item:hover{transform:translateX(2px)}
.submenu-item.active{background:color-mix(in srgb, var(--cds-primary-fg) 15%, transparent)}
.submenu-item i{width:16px;text-align:center;font-size:var(--cds-fs-sm);flex-shrink:0}

.sidebar.collapsed .menu-group .menu-item .fa-chevron-down{display:none}
.sidebar.collapsed .submenu{display:none!important}
.sidebar.collapsed .menu-group .menu-item{justify-content:center;padding:var(--cds-sp-3) var(--cds-sp-2)}

/* Submenú flotante cuando está colapsado */
.sidebar.collapsed .menu-group:hover .submenu{
  display:block!important;
  position:fixed;left:var(--cds-sidebar-w-collapsed);
  min-width:220px;
  background:var(--cds-primary-active);
  border-radius:var(--cds-r-md);
  box-shadow:var(--cds-shadow-xl);
  z-index:1002;
  border:1px solid color-mix(in srgb, var(--cds-primary-fg) 20%, transparent);
  animation:cds-slide-in-right .2s ease-out;
  padding:var(--cds-sp-2) 0;
}
@keyframes cds-slide-in-right{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.sidebar.collapsed .menu-group:hover .submenu-item{
  padding:var(--cds-sp-2) var(--cds-sp-4)!important;
  color:color-mix(in srgb, var(--cds-primary-fg) 90%, transparent);
  margin:0!important;
  white-space:nowrap;
  width:100%;
}
.sidebar.collapsed .menu-group:hover .submenu-item:hover{
  background:color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);
  color:var(--cds-primary-fg);
}
.sidebar.collapsed .menu-group:hover .submenu-item .menu-text{
  opacity:1!important;visibility:visible!important;position:static!important;display:inline!important;
}

/* Tooltip para menú colapsado */
.sidebar.collapsed .menu-group .menu-item:hover::before{
  content:attr(data-title);
  position:absolute;left:100%;top:50%;transform:translateY(-50%);
  background:var(--cds-fg);color:var(--cds-fg-inverse);
  padding:var(--cds-sp-2) var(--cds-sp-4);
  border-radius:var(--cds-r-md);
  font-size:var(--cds-fs-xs);white-space:nowrap;
  margin-left:var(--cds-sp-3);
  box-shadow:var(--cds-shadow-md);z-index:1003;
  pointer-events:none;
  animation:cds-fade-in .15s ease-out;
}
@keyframes cds-fade-in{from{opacity:0}to{opacity:1}}

.sidebar-footer{
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-top:1px solid color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);
  background:color-mix(in srgb, var(--cds-primary-active) 60%, transparent);
  transition:padding var(--cds-t-base);
  flex-shrink:0;
  padding-bottom:calc(var(--cds-sp-3) + var(--cds-safe-bottom));
}
.sidebar.collapsed .sidebar-footer{padding:var(--cds-sp-3) var(--cds-sp-2)}
.sidebar-version{text-align:center;font-size:var(--cds-fs-2xs);color:color-mix(in srgb, var(--cds-primary-fg) 60%, transparent)}

/* ----- MAIN CONTENT ----- */
.main-content{
  flex:1;margin-left:var(--cds-sidebar-w);
  transition:margin-left var(--cds-t-base);
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  width:calc(100% - var(--cds-sidebar-w));
  max-width:100%;
}
.main-content.sidebar-collapsed{margin-left:var(--cds-sidebar-w-collapsed);width:calc(100% - var(--cds-sidebar-w-collapsed))}

/* ----- NAVBAR ----- */
.top-navbar{
  background:var(--cds-surface);
  box-shadow:var(--cds-shadow-sm);
  padding:var(--cds-sp-3) var(--cds-sp-6);
  padding-top:calc(var(--cds-sp-3) + var(--cds-safe-top));
  position:sticky;top:0;z-index:999;
  border-bottom:1px solid var(--cds-border);
  transition:background var(--cds-t-base), border-color var(--cds-t-base), box-shadow var(--cds-t-base);
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--cds-navbar-h);
}
.top-navbar:hover{box-shadow:var(--cds-shadow-md)}
.navbar-content{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--cds-sp-4)}
.nav-item.dropdown .dropdown-menu{
  border:none;box-shadow:var(--cds-shadow-lg);
  border-radius:var(--cds-r-md);
  border:1px solid var(--cds-border);
  background:var(--cds-surface);
}
.user-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--cds-gradient-brand);
  display:flex;align-items:center;justify-content:center;
  color:var(--cds-primary-fg);font-weight:var(--cds-fw-semibold);
  font-size:var(--cds-fs-sm);cursor:pointer;flex-shrink:0;
  transition:transform var(--cds-t-spring), box-shadow var(--cds-t-fast);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--cds-primary) 30%, transparent);
}
.user-avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 50%, transparent), var(--cds-shadow-md)}
.user-avatar:active{transform:scale(0.96)}

.sidebar-toggle-mobile{
  display:none;background:none;border:none;
  font-size:var(--cds-fs-xl);color:var(--cds-fg);
  padding:var(--cds-sp-2);cursor:pointer;
  border-radius:var(--cds-r-md);
  transition:all var(--cds-t-fast);
  min-width:var(--cds-touch-target);
  min-height:var(--cds-touch-target);
  align-items:center;justify-content:center;
}
.sidebar-toggle-mobile:hover{color:var(--cds-primary);background:var(--cds-bg-alt);transform:scale(1.05)}
.sidebar-toggle-mobile:active{transform:scale(0.95)}

/* ----- DASHBOARD CONTENT ----- */
.dashboard-content{
  padding:var(--cds-sp-6);
  flex:1;
  background:var(--cds-bg);
  transition:background var(--cds-t-base);
  overflow-x:hidden;
  padding-bottom:calc(var(--cds-sp-6) + var(--cds-safe-bottom));
  max-width:100%;
}

/* ----- SIDEBAR OVERLAY MÓVIL ----- */
.sidebar-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:999;opacity:0;visibility:hidden;
  transition:opacity var(--cds-t-base), visibility var(--cds-t-base);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  -webkit-tap-highlight-color:transparent;
}
.sidebar-overlay.active{opacity:1;visibility:visible}

/* ---------------------------------------------------------
   4. WELCOME HEADER (dashboard)
   --------------------------------------------------------- */
.welcome-header{
  background:var(--cds-gradient-brand);
  color:var(--cds-primary-fg);
  padding:var(--cds-sp-6);
  border-radius:var(--cds-r-lg);
  margin-bottom:var(--cds-sp-6);
  box-shadow:var(--cds-shadow-md);
  display:flex;justify-content:space-between;align-items:flex-start;
  position:relative;overflow:hidden;
  transition:box-shadow var(--cds-t-base);
}
.welcome-header:hover{box-shadow:var(--cds-shadow-lg)}
.welcome-header::before{
  content:'';position:absolute;top:-50%;right:-50%;
  width:100%;height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size:20px 20px;opacity:.3;pointer-events:none;
  transition:opacity var(--cds-t-slow);
}
.welcome-header:hover::before{opacity:.5}
.welcome-content h1{font-weight:var(--cds-fw-bold);margin-bottom:var(--cds-sp-2);color:var(--cds-primary-fg)}
.welcome-content .text-muted{color:color-mix(in srgb, var(--cds-primary-fg) 80%, transparent)!important}
.user-network-indicators{margin-top:var(--cds-sp-3);display:flex;gap:var(--cds-sp-3);flex-wrap:wrap}
.network-badge{
  padding:var(--cds-sp-2) var(--cds-sp-4);
  border-radius:var(--cds-r-full);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:var(--cds-primary-fg);
  transition:transform var(--cds-t-spring), background-color var(--cds-t-fast);
}
.network-badge:hover{transform:translateY(-2px)}
.network-badge.badge-primary{background:color-mix(in srgb, var(--cds-primary) 40%, transparent)}
.network-badge.badge-success{background:color-mix(in srgb, var(--cds-success) 40%, transparent)}
.network-badge.badge-info{background:color-mix(in srgb, var(--cds-info) 40%, transparent)}
.network-badge.badge-warning{background:color-mix(in srgb, var(--cds-warning) 40%, transparent)}
.welcome-actions{display:flex;flex-direction:column;gap:var(--cds-sp-3);align-items:flex-end}
.date-display,.user-badge{
  background:rgba(255,255,255,.1);
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-radius:var(--cds-r-md);
  border:1px solid rgba(255,255,255,.2);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--cds-primary-fg);
  transition:background-color var(--cds-t-fast);
}
.date-display:hover,.user-badge:hover{background:rgba(255,255,255,.15)}
.header-actions{display:flex;gap:var(--cds-sp-2);flex-wrap:wrap}

/* ---------------------------------------------------------
   5. DASHBOARD CARDS
   --------------------------------------------------------- */
.dashboard-card{
  background:var(--cds-surface);
  border-radius:var(--cds-r-lg);
  border:1px solid var(--cds-border);
  box-shadow:var(--cds-shadow-xs);
  transition:box-shadow var(--cds-t-base), transform var(--cds-t-base), border-color var(--cds-t-base);
  overflow:hidden;
  min-width:0;
}
.dashboard-card:hover{box-shadow:var(--cds-shadow-md);transform:translateY(-2px);border-color:var(--cds-border-strong)}
.premium-card{
  border:2px solid transparent;
  background:
    linear-gradient(var(--cds-primary-soft), var(--cds-primary-soft)) padding-box,
    var(--cds-gradient-brand) border-box;
}
.card-header-enhanced{padding:var(--cds-sp-5) var(--cds-sp-5) 0;border-bottom:1px solid var(--cds-border)}
.card-header-enhanced .header-content{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--cds-sp-3);gap:var(--cds-sp-3);flex-wrap:wrap}
.title-section{display:flex;align-items:center;gap:var(--cds-sp-3);min-width:0}
.title-icon{font-size:var(--cds-fs-4xl);color:var(--cds-warning);transition:transform var(--cds-t-spring);flex-shrink:0}
.dashboard-card:hover .title-icon{transform:rotate(-5deg) scale(1.1)}
.card-title{font-weight:var(--cds-fw-bold);color:var(--cds-fg);margin-bottom:var(--cds-sp-1)}
.card-subtitle{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm);margin-bottom:0}
.header-stats .stat-badge{
  background:var(--cds-gradient-brand);color:var(--cds-primary-fg);
  padding:var(--cds-sp-2) var(--cds-sp-4);border-radius:var(--cds-r-full);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  display:inline-block;white-space:nowrap;
}

/* ---------------------------------------------------------
   6. TOP REFERIDORES CARDS
   --------------------------------------------------------- */
.top-referidores-grid-enhanced{display:flex;flex-direction:column;gap:var(--cds-sp-3);padding:var(--cds-sp-5)}
.referidor-card-enhanced{
  background:var(--cds-surface);
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);
  padding:var(--cds-sp-5);
  display:flex;align-items:center;gap:var(--cds-sp-5);
  transition:box-shadow var(--cds-t-base), transform var(--cds-t-base), border-color var(--cds-t-base), background-color var(--cds-t-base);
  position:relative;
  min-width:0;
}
.referidor-card-enhanced:hover{
  box-shadow:var(--cds-shadow-md);
  transform:translateY(-3px);
  border-color:var(--cds-primary);
}
.referidor-card-enhanced.top-position{
  background:var(--cds-primary-soft);
  border:2px solid var(--cds-warning);
}
.referidor-card-enhanced.position-1{background:var(--cds-warning-soft);border:2px solid var(--cds-warning)}
.referidor-card-enhanced.position-2{background:var(--cds-bg-alt);border:2px solid var(--cds-border-strong)}
.referidor-card-enhanced.position-3{background:var(--cds-accent-soft);border:2px solid var(--cds-accent)}
.referidor-card-enhanced.my-position{
  border:2px solid var(--cds-primary);
  background:var(--cds-primary-soft);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent);
}

.referidor-rank-section{display:flex;align-items:center;flex-shrink:0}
.rank-badge{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;font-weight:var(--cds-fw-bold);font-size:var(--cds-fs-xl);
  transition:transform var(--cds-t-spring);
}
.referidor-card-enhanced:hover .rank-badge{transform:scale(1.1) rotate(-5deg)}
.rank-1{background:linear-gradient(135deg,var(--cds-warning),#fbbf24);color:#000;box-shadow:var(--cds-shadow-md)}
.rank-2{background:linear-gradient(135deg,var(--cds-border-strong),#9ca3af);color:#000;box-shadow:var(--cds-shadow-md)}
.rank-3{background:linear-gradient(135deg,var(--cds-accent),#a78bfa);color:#fff;box-shadow:var(--cds-shadow-md)}
.rank-4,.rank-5,.rank-6,.rank-7,.rank-8,.rank-9,.rank-10{
  background:var(--cds-gradient-brand);color:var(--cds-primary-fg);
  box-shadow:var(--cds-shadow-sm);
}
.rank-badge.my-rank{background:var(--cds-primary)!important;border:2px solid var(--cds-surface)}
.rank-crown{position:absolute;top:-8px;font-size:var(--cds-fs-lg);color:var(--cds-warning);animation:cds-crown-bob 2s ease-in-out infinite}
@keyframes cds-crown-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.referidor-info-section{flex:1;display:flex;justify-content:space-between;align-items:center;gap:var(--cds-sp-6);min-width:0}
.referidor-main-info{display:flex;align-items:center;gap:var(--cds-sp-3);min-width:0}
.referidor-avatar{
  width:50px;height:50px;border-radius:50%;
  background:var(--cds-gradient-brand);
  display:flex;align-items:center;justify-content:center;
  color:var(--cds-primary-fg);font-size:var(--cds-fs-xl);
  transition:transform var(--cds-t-spring);
  flex-shrink:0;
}
.referidor-card-enhanced:hover .referidor-avatar{transform:scale(1.08)}
.referidor-avatar.my-avatar{background:var(--cds-primary);position:relative}
.avatar-badge{
  position:absolute;top:-5px;right:-5px;
  background:var(--cds-warning);border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#000;border:2px solid var(--cds-surface);
}
.referidor-details h6{font-weight:var(--cds-fw-bold);margin-bottom:var(--cds-sp-1);color:var(--cds-fg);word-break:break-word}
.referidor-cedula{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm)}
.referidor-stats-section{display:flex;align-items:center;gap:var(--cds-sp-6);flex-shrink:0}
.referidor-progress-enhanced{min-width:200px}
.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cds-sp-2)}
.progress-value{font-weight:var(--cds-fw-bold);color:var(--cds-fg);font-size:var(--cds-fs-lg)}
.progress-label{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm)}
.progress-bar-container .progress{background:var(--cds-bg-alt);border-radius:var(--cds-r-full);overflow:hidden;height:8px}
.progress-bar-premium{background:linear-gradient(135deg,var(--cds-warning),#fbbf24)!important;transition:width var(--cds-t-slow)}
.progress-bar-standard{background:var(--cds-gradient-brand)!important;transition:width var(--cds-t-slow)}
.progress-bar-my-position{background:var(--cds-primary)!important}

.referidor-numbers{display:flex;align-items:center;gap:var(--cds-sp-4)}
.stat-number{text-align:center}
.stat-number .number{display:block;font-weight:var(--cds-fw-bold);font-size:var(--cds-fs-3xl);color:var(--cds-fg)}
.stat-number .label{font-size:var(--cds-fs-sm);color:var(--cds-fg-muted)}
.level-badge{padding:var(--cds-sp-2) var(--cds-sp-4);border-radius:var(--cds-r-full);font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);color:var(--cds-primary-fg);transition:transform var(--cds-t-fast);white-space:nowrap}
.level-badge:hover{transform:scale(1.05)}
.level-5{background:var(--cds-success)}
.level-4{background:var(--cds-info)}
.level-3{background:var(--cds-accent)}
.level-2{background:var(--cds-warning)}
.level-1{background:var(--cds-danger)}

/* ---------------------------------------------------------
   7. STAT CARDS (métricas)
   --------------------------------------------------------- */
.stat-card{
  background:var(--cds-surface);
  border-radius:var(--cds-r-lg);
  padding:var(--cds-sp-4);
  box-shadow:var(--cds-shadow-xs);
  transition:box-shadow var(--cds-t-base), transform var(--cds-t-base), border-left-color var(--cds-t-base);
  border-left:4px solid var(--cds-primary);
  height:100%;
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.stat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--cds-primary) 5%, transparent));
  opacity:0;transition:opacity var(--cds-t-base);pointer-events:none;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--cds-shadow-md)}
.stat-card:hover::after{opacity:1}
.stat-card.primary{border-left-color:var(--cds-primary)}
.stat-card.success{border-left-color:var(--cds-success)}
.stat-card.warning{border-left-color:var(--cds-warning)}
.stat-card.info{border-left-color:var(--cds-info)}
.stat-card.danger{border-left-color:var(--cds-danger)}

.stat-content{display:flex;align-items:flex-start;gap:var(--cds-sp-3);margin-bottom:var(--cds-sp-3)}
.stat-icon{
  width:48px;height:48px;border-radius:var(--cds-r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-3xl);flex-shrink:0;
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  transition:transform var(--cds-t-spring);
}
.stat-card:hover .stat-icon{transform:scale(1.1) rotate(-3deg)}
.stat-icon.primary{background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg)}
.stat-icon.success{background:var(--cds-success-soft);color:var(--cds-success-fg)}
.stat-icon.warning{background:var(--cds-warning-soft);color:var(--cds-warning-fg)}
.stat-icon.info{background:var(--cds-info-soft);color:var(--cds-info-fg)}
.stat-icon.danger{background:var(--cds-danger-soft);color:var(--cds-danger-fg)}

.stat-info{flex:1;min-width:0}
.stat-card .stat-number{font-size:var(--cds-fs-4xl);font-weight:var(--cds-fw-bold);line-height:1;color:var(--cds-fg);margin-bottom:var(--cds-sp-1)}
.stat-title{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium)}
.stat-trend{display:flex;align-items:center;gap:var(--cds-sp-1);font-size:var(--cds-fs-xs);margin-top:var(--cds-sp-2);flex-wrap:wrap}
.trend-up{color:var(--cds-success)}
.trend-down{color:var(--cds-danger)}
.trend-neutral{color:var(--cds-fg-muted)}
.trend-info{color:var(--cds-info)}
.stat-footer{margin-top:auto;border-top:1px solid var(--cds-border);padding-top:var(--cds-sp-2)}
.stat-details{display:flex;justify-content:space-between;font-size:var(--cds-fs-2xs);color:var(--cds-fg-muted);gap:var(--cds-sp-2);flex-wrap:wrap}
.stat-progress{margin-top:var(--cds-sp-3)}

/* Metric cards small */
.metric-card-sm{
  background:var(--cds-surface);border-radius:var(--cds-r-lg);
  padding:var(--cds-sp-4);display:flex;align-items:center;gap:var(--cds-sp-3);
  box-shadow:var(--cds-shadow-xs);transition:all var(--cds-t-base);
  border:1px solid var(--cds-border);border-left:4px solid transparent;
  min-width:0;
}
.metric-card-sm:hover{transform:translateY(-2px);box-shadow:var(--cds-shadow-md);border-color:var(--cds-border-strong)}
.metric-positive{border-left-color:var(--cds-success)}
.metric-negative{border-left-color:var(--cds-danger)}
.metric-info{border-left-color:var(--cds-info)}
.metric-primary{border-left-color:var(--cds-primary)}
.metric-warning{border-left-color:var(--cds-warning)}
.metric-secondary{border-left-color:var(--cds-fg-muted)}
.metric-icon{
  width:50px;height:50px;border-radius:var(--cds-r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-3xl);color:var(--cds-primary-fg);
  background:var(--cds-gradient-brand);
  transition:transform var(--cds-t-spring);
  flex-shrink:0;
}
.metric-card-sm:hover .metric-icon{transform:scale(1.08)}
.metric-content{flex:1;min-width:0}
.metric-value{font-size:var(--cds-fs-3xl);font-weight:var(--cds-fw-bold);margin-bottom:var(--cds-sp-1);color:var(--cds-fg)}
.metric-label{font-size:var(--cds-fs-sm);color:var(--cds-fg-muted)}
.metric-trend{font-size:var(--cds-fs-2xl)}

/* ---------------------------------------------------------
   8. CHART CONTAINERS
   --------------------------------------------------------- */
.chart-container{
  background:var(--cds-surface);
  border-radius:var(--cds-r-lg);
  padding:var(--cds-sp-4);
  box-shadow:var(--cds-shadow-xs);
  margin-bottom:var(--cds-sp-4);
  border:1px solid var(--cds-border);
  transition:box-shadow var(--cds-t-base), border-color var(--cds-t-base);
  min-width:0;
}
.chart-container:hover{box-shadow:var(--cds-shadow-md);border-color:var(--cds-border-strong)}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cds-sp-3);gap:var(--cds-sp-3);flex-wrap:wrap}
.chart-header h5{font-weight:var(--cds-fw-semibold);color:var(--cds-fg);margin:0;font-size:var(--cds-fs-lg)}
.chart-actions{display:flex;gap:var(--cds-sp-2);flex-wrap:wrap}
.chart-body{padding:var(--cds-sp-2);position:relative;min-width:0}
.chart-footer{
  border-top:1px solid var(--cds-border);
  padding:var(--cds-sp-3) var(--cds-sp-4);
  background:var(--cds-bg-alt);
  border-radius:0 0 var(--cds-r-lg) var(--cds-r-lg);
}
.chart-stats{display:flex;justify-content:space-between;align-items:center;gap:var(--cds-sp-2);flex-wrap:wrap}
.chart-stat{text-align:center}
.stat-label{font-size:var(--cds-fs-2xs);color:var(--cds-fg-muted);display:block}
.stat-value{font-weight:var(--cds-fw-semibold);color:var(--cds-fg);display:block;margin-top:var(--cds-sp-1)}
.chart-legend{display:flex;flex-direction:column;gap:var(--cds-sp-2)}
.legend-item{display:flex;align-items:center;gap:var(--cds-sp-2);font-size:var(--cds-fs-sm)}
.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------------------------------------------------------
   9. TABLAS
   --------------------------------------------------------- */
.table-container{
  background:var(--cds-surface);
  border-radius:var(--cds-r-lg);
  box-shadow:var(--cds-shadow-xs);
  overflow:hidden;
  border:1px solid var(--cds-border);
}
.table-section{
  background:var(--cds-surface);
  border-radius:var(--cds-r-lg);
  box-shadow:var(--cds-shadow-xs);
  overflow:hidden;
  border:1px solid var(--cds-border);
  margin-bottom:var(--cds-sp-6);
}
.table-header{
  padding:var(--cds-sp-4);
  border-bottom:1px solid var(--cds-border);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--cds-sp-3);
  flex-wrap:wrap;
}
.table-header h5{margin:0;font-weight:var(--cds-fw-semibold);color:var(--cds-fg)}

.cds-table-wrap{
  background:var(--cds-surface);
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);
  overflow:hidden;
  box-shadow:var(--cds-shadow-xs);
}
.cds-table{width:100%;border-collapse:collapse;font-size:var(--cds-fs-sm)}
.cds-table thead th{
  text-align:left;padding:var(--cds-sp-3) var(--cds-sp-4);
  background:var(--cds-bg-alt);color:var(--cds-fg-muted);
  font-size:var(--cds-fs-2xs);font-weight:var(--cds-fw-bold);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--cds-border);
  white-space:nowrap;
}
.cds-table tbody td{
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-bottom:1px solid var(--cds-border);
  color:var(--cds-fg);vertical-align:middle;
  transition:background-color var(--cds-t-fast);
}
.cds-table tbody tr:last-child td{border-bottom:none}
.cds-table tbody tr:hover td{background:var(--cds-bg-alt)}

/* Compat tabla bootstrap */
.table{color:var(--cds-fg);border-color:var(--cds-border);font-size:var(--cds-fs-sm);margin-bottom:0}
.table>thead{background:var(--cds-bg-alt);color:var(--cds-fg-muted)}
.table>thead th{
  border-bottom:1px solid var(--cds-border);
  padding:var(--cds-sp-3) var(--cds-sp-4);
  font-size:var(--cds-fs-2xs);text-transform:uppercase;
  letter-spacing:.06em;font-weight:var(--cds-fw-bold);
}
.table>tbody td{
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-bottom:1px solid var(--cds-border);
  color:var(--cds-fg);vertical-align:middle;
  transition:background-color var(--cds-t-fast);
}
.table-hover>tbody>tr:hover>*{background:var(--cds-bg-alt);color:var(--cds-fg)}
.table-striped>tbody>tr:nth-of-type(odd){background:color-mix(in srgb, var(--cds-bg-alt) 40%, transparent);color:var(--cds-fg)}
.table-light{background:var(--cds-bg-alt)!important;color:var(--cds-fg-muted)!important}
.table-responsive{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border-radius:var(--cds-r-md);max-width:100%}

/* user-avatar dentro de tablas */
.user-avatar-sm{
  width:28px;height:28px;border-radius:50%;
  background:var(--cds-gradient-brand);
  display:flex;align-items:center;justify-content:center;
  color:var(--cds-primary-fg);font-size:var(--cds-fs-2xs);font-weight:var(--cds-fw-semibold);
  flex-shrink:0;
}
.user-info .user-name{font-weight:var(--cds-fw-semibold);color:var(--cds-fg)}
.user-info .user-level{font-size:var(--cds-fs-2xs)}
.user-cedula{background:var(--cds-bg-alt);padding:var(--cds-sp-1) var(--cds-sp-2);border-radius:var(--cds-r-xs);font-family:var(--cds-font-mono);font-size:var(--cds-fs-sm)}
.date-text{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm)}
.action-buttons{display:flex;gap:var(--cds-sp-1);justify-content:flex-end;flex-wrap:wrap}

/* ---------------------------------------------------------
   10. FEED DE ACTIVIDAD
   --------------------------------------------------------- */
.activity-list,.birthday-list,.survey-list,.departments-list{display:flex;flex-direction:column;gap:var(--cds-sp-3)}
.activity-item{
  padding:var(--cds-sp-3) 0;
  border-bottom:1px solid var(--cds-border);
  display:flex;align-items:start;gap:var(--cds-sp-3);
  transition:transform var(--cds-t-fast), background-color var(--cds-t-fast);
  border-radius:var(--cds-r-sm);
}
.activity-item:hover{transform:translateX(4px);background:var(--cds-bg-alt);padding-left:var(--cds-sp-2);margin-left:calc(-1 * var(--cds-sp-2))}
.activity-item:last-child{border-bottom:none}
.activity-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--cds-primary);
  margin-top:var(--cds-sp-2);flex-shrink:0;
}
.activity-dot.unread{
  background:var(--cds-primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--cds-primary) 20%, transparent);
  animation:cds-pulse-dot 2s infinite;
}
@keyframes cds-pulse-dot{
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb, var(--cds-primary) 20%, transparent)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--cds-primary) 10%, transparent)}
}
.activity-content{flex:1;min-width:0}
.activity-title{font-weight:var(--cds-fw-semibold);margin-bottom:var(--cds-sp-1);color:var(--cds-fg);word-break:break-word}
.activity-description{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm);margin-bottom:var(--cds-sp-1);word-break:break-word}
.activity-time{color:var(--cds-fg-muted);font-size:var(--cds-fs-xs)}
.activity-meta .badge{font-size:var(--cds-fs-2xs);padding:var(--cds-sp-1) var(--cds-sp-2)}

/* ---------------------------------------------------------
   11. QUICK ACTIONS
   --------------------------------------------------------- */
.quick-action-btn{
  display:flex;align-items:center;gap:var(--cds-sp-3);
  padding:var(--cds-sp-3);
  background:var(--cds-surface);
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);
  text-decoration:none;color:var(--cds-fg);
  transition:all var(--cds-t-base);
  height:100%;
  min-width:0;
}
.quick-action-btn:hover{
  background:var(--cds-primary-soft);
  border-color:var(--cds-primary);
  color:var(--cds-fg);
  transform:translateY(-3px);
  box-shadow:var(--cds-shadow-md);
}
.quick-action-btn:active{transform:translateY(-1px)}
.action-icon{
  width:50px;height:50px;border-radius:var(--cds-r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-2xl);color:var(--cds-primary-fg);
  flex-shrink:0;background:var(--cds-gradient-brand);
  transition:transform var(--cds-t-spring);
}
.quick-action-btn:hover .action-icon{transform:scale(1.1) rotate(-5deg)}
.action-content{flex:1;min-width:0}
.action-title{font-weight:var(--cds-fw-semibold);display:block;margin-bottom:var(--cds-sp-1);word-break:break-word}
.action-description{font-size:var(--cds-fs-sm);color:var(--cds-fg-muted);display:block;word-break:break-word}
.action-loading{display:flex;align-items:center}
.quick-action-item{transition:transform var(--cds-t-fast), background-color var(--cds-t-fast)}
.quick-action-item:hover{transform:translateX(5px);text-decoration:none}

/* ---------------------------------------------------------
   12. SYSTEM STATUS
   --------------------------------------------------------- */
.system-service{
  display:flex;align-items:center;gap:var(--cds-sp-3);
  padding:var(--cds-sp-3) 0;
  border-bottom:1px solid var(--cds-border);
}
.system-service:last-child{border-bottom:none}
.service-icon{
  width:40px;height:40px;border-radius:var(--cds-r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-lg);color:var(--cds-primary-fg);
  flex-shrink:0;background:var(--cds-gradient-brand);
}
.service-info{flex:1;min-width:0}
.service-name{font-weight:var(--cds-fw-semibold);display:block;color:var(--cds-fg)}
.service-status{font-size:var(--cds-fs-sm);color:var(--cds-fg-muted);display:block}
.service-detail{font-size:var(--cds-fs-2xs);color:var(--cds-fg-muted);display:block;margin-top:var(--cds-sp-1)}
.service-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:box-shadow var(--cds-t-fast)}
.service-indicator.online{
  background:var(--cds-success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-success) 20%, transparent);
  animation:cds-pulse-online 2.5s infinite;
}
@keyframes cds-pulse-online{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-success) 20%, transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--cds-success) 8%, transparent)}
}

/* ---------------------------------------------------------
   13. EMPTY STATES
   --------------------------------------------------------- */
.empty-state,.empty-state-sm{text-align:center;padding:var(--cds-sp-6);color:var(--cds-fg-muted)}
.empty-state-sm{padding:var(--cds-sp-4)}
.empty-icon{margin-bottom:var(--cds-sp-3);opacity:.5;transition:opacity var(--cds-t-base), transform var(--cds-t-spring)}
.empty-state:hover .empty-icon{opacity:.8;transform:scale(1.1)}

/* ---------------------------------------------------------
   14. BOTONES CDS
   --------------------------------------------------------- */
.cds-btn{
  --btn-bg:var(--cds-primary);
  --btn-fg:var(--cds-primary-fg);
  --btn-border:transparent;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cds-sp-2);
  padding:var(--cds-sp-2) var(--cds-sp-4);
  font-family:inherit;font-size:var(--cds-fs-sm);
  font-weight:var(--cds-fw-semibold);line-height:1.2;
  border-radius:var(--cds-r-md);
  border:1px solid var(--btn-border);
  background:var(--btn-bg);color:var(--btn-fg);
  cursor:pointer;transition:all var(--cds-t-fast);
  text-decoration:none;white-space:nowrap;user-select:none;
  overflow:hidden;
  min-height:36px;
}
.cds-btn::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.4) 0%, transparent 70%);
  opacity:0;transform:scale(0);
  transition:opacity var(--cds-t-fast), transform var(--cds-t-fast);
  pointer-events:none;
}
.cds-btn:hover{filter:brightness(.95);transform:translateY(-1px);box-shadow:var(--cds-shadow-sm);color:var(--btn-fg)}
.cds-btn:hover::before{opacity:.1;transform:scale(1.5)}
.cds-btn:active{transform:translateY(0);filter:brightness(.9)}
.cds-btn:disabled,.cds-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.cds-btn i{font-size:var(--cds-fs-xs);transition:transform var(--cds-t-fast)}
.cds-btn:hover i{transform:translateX(1px)}

.cds-btn-primary{--btn-bg:var(--cds-primary);--btn-fg:var(--cds-primary-fg)}
.cds-btn-success{--btn-bg:var(--cds-success);--btn-fg:#fff}
.cds-btn-warning{--btn-bg:var(--cds-warning);--btn-fg:#fff}
.cds-btn-danger{--btn-bg:var(--cds-danger);--btn-fg:#fff}
.cds-btn-info{--btn-bg:var(--cds-info);--btn-fg:#fff}
.cds-btn-neutral{--btn-bg:var(--cds-surface);--btn-fg:var(--cds-fg);--btn-border:var(--cds-border)}
.cds-btn-neutral:hover{background:var(--cds-bg-alt)}
.cds-btn-outline{--btn-bg:transparent;--btn-fg:var(--cds-primary);--btn-border:var(--cds-primary)}
.cds-btn-outline:hover{background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);filter:none}
.cds-btn-ghost{--btn-bg:transparent;--btn-fg:var(--cds-fg-muted);--btn-border:transparent}
.cds-btn-ghost:hover{background:var(--cds-bg-alt);color:var(--cds-fg);filter:none}
.cds-btn-sm{padding:var(--cds-sp-1) var(--cds-sp-3);font-size:var(--cds-fs-xs);min-height:30px}
.cds-btn-lg{padding:var(--cds-sp-3) var(--cds-sp-6);font-size:var(--cds-fs-md);min-height:44px}
.cds-btn-icon{width:36px;height:36px;padding:0;border-radius:var(--cds-r-md)}

/* Compat botones bootstrap */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cds-sp-2);
  padding:var(--cds-sp-2) var(--cds-sp-4);font-family:inherit;
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-semibold);
  border-radius:var(--cds-r-md);border:1px solid transparent;
  cursor:pointer;transition:all var(--cds-t-fast);text-decoration:none;
  white-space:nowrap;line-height:1.2;
  min-height:36px;
}
.btn:hover{filter:brightness(.95);transform:translateY(-1px);box-shadow:var(--cds-shadow-sm)}
.btn:active{transform:translateY(0);filter:brightness(.9)}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--cds-primary);color:var(--cds-primary-fg);border-color:var(--cds-primary)}
.btn-secondary{background:var(--cds-fg-muted);color:var(--cds-fg-inverse);border-color:var(--cds-fg-muted)}
.btn-success{background:var(--cds-success);color:#fff;border-color:var(--cds-success)}
.btn-warning{background:var(--cds-warning);color:#fff;border-color:var(--cds-warning)}
.btn-danger{background:var(--cds-danger);color:#fff;border-color:var(--cds-danger)}
.btn-info{background:var(--cds-info);color:#fff;border-color:var(--cds-info)}
.btn-light{background:var(--cds-surface);color:var(--cds-fg);border-color:var(--cds-border)}
.btn-dark{background:var(--cds-fg);color:var(--cds-fg-inverse);border-color:var(--cds-fg)}
.btn-outline-primary{background:transparent;color:var(--cds-primary);border-color:var(--cds-primary)}
.btn-outline-primary:hover{background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);filter:none}
.btn-outline-secondary{background:transparent;color:var(--cds-fg-muted);border-color:var(--cds-border-strong)}
.btn-outline-secondary:hover{background:var(--cds-bg-alt);color:var(--cds-fg);filter:none}
.btn-outline-success{background:transparent;color:var(--cds-success);border-color:var(--cds-success)}
.btn-outline-success:hover{background:var(--cds-success-soft);color:var(--cds-success-fg);filter:none}
.btn-outline-warning{background:transparent;color:var(--cds-warning);border-color:var(--cds-warning)}
.btn-outline-warning:hover{background:var(--cds-warning-soft);color:var(--cds-warning-fg);filter:none}
.btn-outline-danger{background:transparent;color:var(--cds-danger);border-color:var(--cds-danger)}
.btn-outline-danger:hover{background:var(--cds-danger-soft);color:var(--cds-danger-fg);filter:none}
.btn-outline-info{background:transparent;color:var(--cds-info);border-color:var(--cds-info)}
.btn-outline-info:hover{background:var(--cds-info-soft);color:var(--cds-info-fg);filter:none}
.btn-sm{padding:var(--cds-sp-1) var(--cds-sp-3);font-size:var(--cds-fs-xs);min-height:30px}
.btn-lg{padding:var(--cds-sp-3) var(--cds-sp-6);font-size:var(--cds-fs-md);min-height:44px}
.btn-primary-custom{
  background:var(--cds-gradient-brand);border:none;color:var(--cds-primary-fg);
  font-weight:var(--cds-fw-semibold);transition:all var(--cds-t-fast);
  padding:var(--cds-sp-2) var(--cds-sp-4);border-radius:var(--cds-r-md);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cds-sp-2);
  font-size:var(--cds-fs-sm);
  position:relative;overflow:hidden;
  min-height:36px;
}
.btn-primary-custom::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition:left 0.6s ease;
}
.btn-primary-custom:hover::before{left:100%}
.btn-primary-custom:hover{filter:brightness(.95);transform:translateY(-1px);box-shadow:var(--cds-shadow-md);color:var(--cds-primary-fg)}
.btn-primary-custom:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-outline-primary-custom{
  border-color:var(--cds-primary)!important;color:var(--cds-primary)!important;
  font-size:var(--cds-fs-sm)!important;padding:var(--cds-sp-1) var(--cds-sp-3)!important;
  background:transparent;border-width:1px;border-style:solid;border-radius:var(--cds-r-md);
  transition:all var(--cds-t-fast);
}
.btn-outline-primary-custom:hover{background:var(--cds-primary)!important;color:var(--cds-primary-fg)!important;transform:translateY(-1px)!important;box-shadow:var(--cds-shadow-sm)!important}

/* ---------------------------------------------------------
   15. BADGES
   --------------------------------------------------------- */
.cds-badge{
  display:inline-flex;align-items:center;gap:var(--cds-sp-1);
  padding:2px var(--cds-sp-2);
  border-radius:var(--cds-r-full);
  font-size:var(--cds-fs-2xs);font-weight:var(--cds-fw-semibold);
  line-height:1.6;
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  white-space:nowrap;
  transition:transform var(--cds-t-fast), filter var(--cds-t-fast);
}
.cds-badge:hover{transform:scale(1.05)}
.cds-badge-success{background:var(--cds-success-soft);color:var(--cds-success-fg)}
.cds-badge-warning{background:var(--cds-warning-soft);color:var(--cds-warning-fg)}
.cds-badge-danger{background:var(--cds-danger-soft);color:var(--cds-danger-fg)}
.cds-badge-info{background:var(--cds-info-soft);color:var(--cds-info-fg)}
.cds-badge-neutral{background:var(--cds-bg-alt);color:var(--cds-fg-muted)}

/* Compat legacy .badge */
.badge{
  display:inline-flex;align-items:center;gap:var(--cds-sp-1);
  padding:var(--cds-sp-1) var(--cds-sp-2);
  border-radius:var(--cds-r-full);
  font-size:var(--cds-fs-2xs);font-weight:var(--cds-fw-semibold);
  line-height:1.6;white-space:nowrap;
  transition:transform var(--cds-t-fast);
}
.badge:hover{transform:scale(1.05)}
.badge.bg-primary{background:var(--cds-primary-soft)!important;color:var(--cds-primary-soft-fg)!important}
.badge.bg-success{background:var(--cds-success-soft)!important;color:var(--cds-success-fg)!important}
.badge.bg-warning{background:var(--cds-warning-soft)!important;color:var(--cds-warning-fg)!important}
.badge.bg-danger{background:var(--cds-danger-soft)!important;color:var(--cds-danger-fg)!important}
.badge.bg-info{background:var(--cds-info-soft)!important;color:var(--cds-info-fg)!important}
.badge.bg-secondary{background:var(--cds-bg-alt)!important;color:var(--cds-fg-muted)!important}
.badge.bg-light{background:var(--cds-bg-alt)!important;color:var(--cds-fg-muted)!important}
.badge.bg-dark{background:var(--cds-fg)!important;color:var(--cds-fg-inverse)!important}
.badge-success{background:var(--cds-success-soft);color:var(--cds-success-fg)}
.badge-warning{background:var(--cds-warning-soft);color:var(--cds-warning-fg)}
.badge-danger{background:var(--cds-danger-soft);color:var(--cds-danger-fg)}
.badge-info{background:var(--cds-info-soft);color:var(--cds-info-fg)}

/* ---------------------------------------------------------
   16. ALERTS
   --------------------------------------------------------- */
.cds-alert{
  display:flex;gap:var(--cds-sp-3);
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-radius:var(--cds-r-md);
  border-left:4px solid var(--cds-primary);
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  font-size:var(--cds-fs-sm);margin-bottom:var(--cds-sp-3);
  align-items:flex-start;
  animation:cds-alert-in .25s ease-out;
}
@keyframes cds-alert-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cds-alert i{font-size:var(--cds-fs-lg);flex-shrink:0;margin-top:2px}
.cds-alert-success{border-color:var(--cds-success);background:var(--cds-success-soft);color:var(--cds-success-fg)}
.cds-alert-warning{border-color:var(--cds-warning);background:var(--cds-warning-soft);color:var(--cds-warning-fg)}
.cds-alert-danger{border-color:var(--cds-danger);background:var(--cds-danger-soft);color:var(--cds-danger-fg)}
.cds-alert-info{border-color:var(--cds-info);background:var(--cds-info-soft);color:var(--cds-info-fg)}

.alert{
  border-radius:var(--cds-r-md);border:none;
  padding:var(--cds-sp-3) var(--cds-sp-4);
  font-size:var(--cds-fs-sm);margin-bottom:var(--cds-sp-3);
  display:flex;align-items:flex-start;gap:var(--cds-sp-3);
}
.alert-success{background:var(--cds-success-soft);color:var(--cds-success-fg);border-left:4px solid var(--cds-success)}
.alert-warning{background:var(--cds-warning-soft);color:var(--cds-warning-fg);border-left:4px solid var(--cds-warning)}
.alert-danger{background:var(--cds-danger-soft);color:var(--cds-danger-fg);border-left:4px solid var(--cds-danger)}
.alert-info{background:var(--cds-info-soft);color:var(--cds-info-fg);border-left:4px solid var(--cds-info)}
.alert-primary{background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);border-left:4px solid var(--cds-primary)}
.alert .btn-close{filter:invert(.4);opacity:.7;transition:opacity var(--cds-t-fast), transform var(--cds-t-fast)}
.alert .btn-close:hover{opacity:1;transform:scale(1.1)}

/* ---------------------------------------------------------
   17. INPUTS / FORMS
   --------------------------------------------------------- */
.cds-field{display:flex;flex-direction:column;gap:var(--cds-sp-1);margin-bottom:var(--cds-sp-3)}
.cds-label{font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-semibold);color:var(--cds-fg-muted)}
.cds-input,.cds-select,.cds-textarea{
  width:100%;padding:var(--cds-sp-2) var(--cds-sp-3);
  font-family:inherit;font-size:var(--cds-fs-sm);
  color:var(--cds-fg);background:var(--cds-surface);
  border:1px solid var(--cds-border-strong);
  border-radius:var(--cds-r-md);
  transition:border-color var(--cds-t-fast), box-shadow var(--cds-t-fast), background var(--cds-t-base);
  min-height:38px;
}
.cds-input:focus,.cds-select:focus,.cds-textarea:focus{
  outline:none;border-color:var(--cds-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent);
}
.cds-input::placeholder{color:var(--cds-fg-subtle)}
.cds-input.is-error{border-color:var(--cds-danger)}
.cds-input.is-error:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-danger) 20%, transparent)}
.cds-help{font-size:var(--cds-fs-2xs);color:var(--cds-fg-subtle)}
.cds-textarea{resize:vertical;min-height:80px}

/* Bootstrap forms */
.form-control,.form-select,.form-check-input{
  background:var(--cds-surface);color:var(--cds-fg);
  border:1px solid var(--cds-border-strong);
  border-radius:var(--cds-r-md);font-size:var(--cds-fs-sm);
  padding:var(--cds-sp-2) var(--cds-sp-3);
  transition:border-color var(--cds-t-fast), box-shadow var(--cds-t-fast), background-color var(--cds-t-fast);
  min-height:38px;
}
.form-control:focus,.form-select:focus{
  background:var(--cds-surface);color:var(--cds-fg);
  border-color:var(--cds-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent);
}
.form-control::placeholder{color:var(--cds-fg-subtle)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--cds-danger)}
.invalid-feedback{color:var(--cds-danger-fg);font-size:var(--cds-fs-2xs);margin-top:2px}
.form-check-input:checked{background-color:var(--cds-primary);border-color:var(--cds-primary)}
.form-check-input:focus{border-color:var(--cds-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent)}
.form-label{color:var(--cds-fg-muted);font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-semibold);margin-bottom:var(--cds-sp-1)}
.form-text{color:var(--cds-fg-subtle);font-size:var(--cds-fs-2xs)}
.input-group-text{background:var(--cds-bg-alt);border:1px solid var(--cds-border-strong);color:var(--cds-fg-muted);font-size:var(--cds-fs-sm)}

/* Switch */
.cds-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.cds-switch input{opacity:0;width:0;height:0}
.cds-switch .slider{position:absolute;inset:0;cursor:pointer;background:var(--cds-border-strong);border-radius:var(--cds-r-full);transition:background var(--cds-t-base)}
.cds-switch .slider::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--cds-t-base);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cds-switch input:checked + .slider{background:var(--cds-primary)}
.cds-switch input:checked + .slider::before{transform:translateX(18px)}
.form-check.form-switch .form-check-input{width:40px;height:22px}

/* ---------------------------------------------------------
   18. TABS
   --------------------------------------------------------- */
.cds-tabs{display:flex;gap:var(--cds-sp-1);border-bottom:1px solid var(--cds-border);margin-bottom:var(--cds-sp-4);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
.cds-tabs::-webkit-scrollbar{display:none}
.cds-tab{
  padding:var(--cds-sp-2) var(--cds-sp-4);
  border:none;background:transparent;font-family:inherit;
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  color:var(--cds-fg-muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all var(--cds-t-fast);white-space:nowrap;
  position:relative;
  min-height:40px;
}
.cds-tab:hover{color:var(--cds-fg)}
.cds-tab.active{color:var(--cds-primary);border-bottom-color:var(--cds-primary)}

.nav-tabs{border-bottom:1px solid var(--cds-border);gap:var(--cds-sp-1);overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs .nav-link{
  border:none;background:transparent;color:var(--cds-fg-muted);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  border-bottom:2px solid transparent;
  padding:var(--cds-sp-2) var(--cds-sp-4);
  margin-bottom:-1px;border-radius:0;transition:all var(--cds-t-fast);
  white-space:nowrap;
}
.nav-tabs .nav-link:hover{color:var(--cds-fg);background:var(--cds-bg-alt)}
.nav-tabs .nav-link.active{
  color:var(--cds-primary);background:transparent;
  border-bottom-color:var(--cds-primary);
  border-color:transparent transparent var(--cds-primary) transparent;
}
.nav-pills .nav-link{color:var(--cds-fg-muted);border-radius:var(--cds-r-md);font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);transition:all var(--cds-t-fast)}
.nav-pills .nav-link:hover{background:var(--cds-bg-alt);color:var(--cds-fg)}
.nav-pills .nav-link.active{background:var(--cds-primary);color:var(--cds-primary-fg)}

/* ---------------------------------------------------------
   19. PAGINACIÓN
   --------------------------------------------------------- */
.cds-pagination,.pagination,.custom-pagination{
  display:flex;gap:var(--cds-sp-1);align-items:center;flex-wrap:wrap;
  list-style:none;padding:0;margin:0;
}
.cds-page,.page-link{
  min-width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--cds-sp-2);
  border-radius:var(--cds-r-md);
  border:1px solid var(--cds-border);
  background:var(--cds-surface);
  color:var(--cds-fg-muted);
  font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-medium);
  cursor:pointer;transition:all var(--cds-t-fast);
  text-decoration:none;
}
.cds-page:hover,.page-link:hover{border-color:var(--cds-primary);color:var(--cds-primary);background:var(--cds-surface);transform:translateY(-1px)}
.cds-page.active,.page-item.active .page-link{background:var(--cds-primary);color:var(--cds-primary-fg);border-color:var(--cds-primary)}
.cds-page[disabled],.page-item.disabled .page-link{opacity:.4;cursor:not-allowed}
.custom-pagination .page-item .page-link:hover{border-color:var(--cds-primary);color:var(--cds-primary)}
.custom-pagination .page-item.active .page-link{background:var(--cds-primary);border-color:var(--cds-primary);color:var(--cds-primary-fg)}

/* ---------------------------------------------------------
   20. CARDS
   --------------------------------------------------------- */
.cds-card{
  background:var(--cds-surface);border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);box-shadow:var(--cds-shadow-xs);
  overflow:hidden;transition:box-shadow var(--cds-t-base), transform var(--cds-t-base), border-color var(--cds-t-base);
  min-width:0;
}
.cds-card:hover{box-shadow:var(--cds-shadow-md);transform:translateY(-2px);border-color:var(--cds-border-strong)}
.cds-card-media{height:120px;background:var(--cds-gradient-brand);display:grid;place-items:center;color:var(--cds-primary-fg);font-size:2rem}
.cds-card-body{padding:var(--cds-sp-4)}
.cds-card-body h4{margin-bottom:var(--cds-sp-2)}
.cds-card-body p{color:var(--cds-fg-muted);font-size:var(--cds-fs-sm);margin-bottom:var(--cds-sp-3)}
.cds-card-footer{
  padding:var(--cds-sp-3) var(--cds-sp-4);
  border-top:1px solid var(--cds-border);
  background:var(--cds-bg-alt);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--cds-sp-2);flex-wrap:wrap;
}
.card{
  background:var(--cds-surface);color:var(--cds-fg);
  border:1px solid var(--cds-border);border-radius:var(--cds-r-lg);
  box-shadow:var(--cds-shadow-xs);
  transition:box-shadow var(--cds-t-base), transform var(--cds-t-base), border-color var(--cds-t-base);
}
.card:hover{box-shadow:var(--cds-shadow-sm);border-color:var(--cds-border-strong)}
.card-header{background:var(--cds-bg-alt)!important;color:var(--cds-fg);border-bottom:1px solid var(--cds-border);padding:var(--cds-sp-3) var(--cds-sp-4)}
.card-body{padding:var(--cds-sp-4);color:var(--cds-fg)}
.card-footer{background:var(--cds-bg-alt);border-top:1px solid var(--cds-border);padding:var(--cds-sp-3) var(--cds-sp-4)}
.card-title{color:var(--cds-fg);font-weight:var(--cds-fw-semibold);margin-bottom:var(--cds-sp-2)}

/* ---------------------------------------------------------
   21. MODALES
   --------------------------------------------------------- */
.cds-modal-backdrop,.modal.show{
  position:fixed;inset:0;background:rgba(2,6,23,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:1055;padding:var(--cds-sp-4);
  padding-top:calc(var(--cds-sp-4) + var(--cds-safe-top));
  padding-bottom:calc(var(--cds-sp-4) + var(--cds-safe-bottom));
  animation:cds-fade var(--cds-t-base);
}
.cds-modal-backdrop:not(.open):not(.show){display:none}
.cds-modal,.modal-content{
  background:var(--cds-surface);color:var(--cds-fg);
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-xl);
  box-shadow:var(--cds-shadow-xl);
  width:100%;max-width:520px;
  overflow:hidden;
  animation:cds-pop var(--cds-t-base);
  max-height:calc(100vh - var(--cds-sp-8));
  max-height:calc(100dvh - var(--cds-sp-8));
  display:flex;flex-direction:column;
}
.modal-lg .modal-content,.cds-modal.modal-lg{max-width:800px}
.modal-xl .modal-content,.cds-modal.modal-xl{max-width:1140px}
.cds-modal-header,.modal-header{
  padding:var(--cds-sp-4) var(--cds-sp-5);
  border-bottom:1px solid var(--cds-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--cds-surface);
  flex-shrink:0;gap:var(--cds-sp-2);
}
.cds-modal-header h3,.modal-title{font-size:var(--cds-fs-lg);color:var(--cds-fg);margin:0;font-weight:var(--cds-fw-semibold)}
.cds-modal-body,.modal-body{padding:var(--cds-sp-5);color:var(--cds-fg);max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.cds-modal-footer,.modal-footer{
  padding:var(--cds-sp-3) var(--cds-sp-5);
  border-top:1px solid var(--cds-border);
  background:var(--cds-bg-alt);
  display:flex;justify-content:flex-end;gap:var(--cds-sp-2);
  flex-shrink:0;flex-wrap:wrap;
}
.modal .btn-close{filter:invert(.4)}
[data-theme="oscuro"] .modal .btn-close,[data-theme="corporativo-oscuro"] .modal .btn-close{filter:invert(1)}

@keyframes cds-fade{from{opacity:0}to{opacity:1}}
@keyframes cds-pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------
   22. TOASTS
   --------------------------------------------------------- */
.cds-toast-stack{
  position:fixed;top:var(--cds-sp-5);right:var(--cds-sp-5);
  display:flex;flex-direction:column;gap:var(--cds-sp-2);
  z-index:1100;pointer-events:none;max-width:420px;
}
.cds-toast{
  pointer-events:auto;min-width:280px;max-width:380px;
  padding:var(--cds-sp-3) var(--cds-sp-4);
  background:var(--cds-surface);border-left:4px solid var(--cds-primary);
  border-radius:var(--cds-r-md);box-shadow:var(--cds-shadow-lg);
  display:flex;gap:var(--cds-sp-3);align-items:flex-start;
  font-size:var(--cds-fs-sm);color:var(--cds-fg);
  animation:cds-slide var(--cds-t-base);
}
.cds-toast-success{border-color:var(--cds-success)}
.cds-toast-warning{border-color:var(--cds-warning)}
.cds-toast-danger{border-color:var(--cds-danger)}
.cds-toast-info{border-color:var(--cds-info)}
.cds-toast strong{display:block;font-weight:var(--cds-fw-semibold);margin-bottom:2px}
.cds-toast span{color:var(--cds-fg-muted);font-size:var(--cds-fs-xs)}
@keyframes cds-slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast{background:var(--cds-surface);color:var(--cds-fg);border:1px solid var(--cds-border);border-radius:var(--cds-r-md);box-shadow:var(--cds-shadow-lg)}
.toast-header{background:var(--cds-bg-alt);color:var(--cds-fg-muted);border-bottom:1px solid var(--cds-border)}
.toast-body{color:var(--cds-fg)}

/* ---------------------------------------------------------
   23. LOADERS / SKELETON / PROGRESS
   --------------------------------------------------------- */
.cds-spinner{
  width:24px;height:24px;border-radius:50%;
  border:3px solid var(--cds-primary-soft);
  border-top-color:var(--cds-primary);
  animation:cds-spin .9s linear infinite;
  display:inline-block;
}
@keyframes cds-spin{to{transform:rotate(360deg)}}
.spinner-border{color:var(--cds-primary)}
.spinner-border-sm{width:1rem;height:1rem;border-width:2px}
.cds-skeleton{
  background:linear-gradient(90deg,var(--cds-bg-alt) 25%,var(--cds-border) 37%,var(--cds-bg-alt) 63%);
  background-size:400% 100%;
  animation:cds-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--cds-r-sm);height:14px;margin-bottom:var(--cds-sp-2);
}
@keyframes cds-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.cds-progress{height:8px;background:var(--cds-bg-alt);border-radius:var(--cds-r-full);overflow:hidden}
.cds-progress > div{height:100%;background:var(--cds-gradient-brand);border-radius:inherit;transition:width var(--cds-t-slow)}
.progress{background:var(--cds-bg-alt);border-radius:var(--cds-r-full);height:8px;overflow:hidden}
.progress-bar{background:var(--cds-gradient-brand);transition:width var(--cds-t-slow)}
.progress-bar.bg-success{background:var(--cds-success)!important}
.progress-bar.bg-warning{background:var(--cds-warning)!important}
.progress-bar.bg-danger{background:var(--cds-danger)!important}
.progress-bar.bg-info{background:var(--cds-info)!important}
.progress-bar.bg-primary{background:var(--cds-primary)!important}

/* ---------------------------------------------------------
   24. DROPDOWN / TOOLTIP / BREADCRUMB / AVATAR
   --------------------------------------------------------- */
.cds-dropdown,.dropdown{position:relative;display:inline-block}
.cds-dropdown-menu,.dropdown-menu{
  background:var(--cds-surface);color:var(--cds-fg);
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-md);
  box-shadow:var(--cds-shadow-lg);
  padding:var(--cds-sp-1);
}
.dropdown-menu.show{animation:cds-pop var(--cds-t-fast)}
.dropdown-item{
  color:var(--cds-fg-muted);border-radius:var(--cds-r-sm);
  padding:var(--cds-sp-2) var(--cds-sp-3);font-size:var(--cds-fs-sm);
  display:flex;align-items:center;gap:var(--cds-sp-2);
  transition:background var(--cds-t-fast), color var(--cds-t-fast);
  min-height:40px;
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--cds-bg-alt);color:var(--cds-fg)}
.dropdown-header{color:var(--cds-fg-subtle);font-size:var(--cds-fs-2xs);text-transform:uppercase;letter-spacing:.06em;padding:var(--cds-sp-2) var(--cds-sp-3)}
.dropdown-divider{border-top:1px solid var(--cds-border);margin:var(--cds-sp-1) 0}

[data-tooltip]{position:relative}
[data-tooltip]:hover::after{
  content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  background:var(--cds-fg);color:var(--cds-fg-inverse);
  padding:4px 8px;border-radius:var(--cds-r-sm);
  font-size:var(--cds-fs-2xs);white-space:nowrap;z-index:100;
  animation:cds-fade-in .15s ease-out;
}
.cds-breadcrumbs,.breadcrumb{
  display:flex;gap:var(--cds-sp-2);list-style:none;padding:0;margin:0;
  font-size:var(--cds-fs-xs);color:var(--cds-fg-muted);flex-wrap:wrap;
}
.cds-breadcrumbs li,.breadcrumb-item{display:flex;align-items:center;gap:var(--cds-sp-2)}
.cds-breadcrumbs li+li::before,.breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--cds-fg-subtle)}
.breadcrumb-item a{color:var(--cds-fg-muted);text-decoration:none;transition:color var(--cds-t-fast)}
.breadcrumb-item a:hover{color:var(--cds-primary)}
.breadcrumb-item.active,.cds-breadcrumbs .current{color:var(--cds-fg);font-weight:var(--cds-fw-medium)}
.breadcrumb{background:transparent!important;padding:0!important;margin-bottom:0!important}

.cds-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--cds-gradient-brand);color:var(--cds-primary-fg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-bold);flex-shrink:0;
  transition:transform var(--cds-t-spring);
}
.cds-avatar:hover{transform:scale(1.08)}
.cds-avatar-lg{width:56px;height:56px;font-size:var(--cds-fs-md)}
.cds-avatar-sm{width:24px;height:24px;font-size:var(--cds-fs-2xs)}

/* ---------------------------------------------------------
   25. THEME SELECTOR (sidebar)
   --------------------------------------------------------- */
.theme-selector-wrapper{position:relative;padding:0!important;border:none!important;background:transparent!important}
.theme-selector{position:relative;width:100%}
.theme-selector-trigger{
  display:flex;align-items:center;
  padding:var(--cds-sp-3) var(--cds-sp-4);
  color:color-mix(in srgb, var(--cds-primary-fg) 90%, transparent);
  cursor:pointer;transition:all var(--cds-t-fast);
  border-left:4px solid transparent;
  margin:2px var(--cds-sp-3);
  white-space:nowrap;border-radius:var(--cds-r-md);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
  min-height:var(--cds-touch-target);
}
.sidebar.collapsed .theme-selector-trigger{padding:var(--cds-sp-3) var(--cds-sp-2);justify-content:center;margin:2px var(--cds-sp-1)}
.theme-selector-trigger:hover{
  background:color-mix(in srgb, var(--cds-primary-fg) 20%, transparent);
  color:var(--cds-primary-fg);
  border-left-color:var(--cds-primary-fg);
}
.theme-label{transition:opacity var(--cds-t-base);opacity:1;flex:1}
.sidebar.collapsed .theme-label{opacity:0;visibility:hidden;position:absolute;pointer-events:none}
.theme-option{
  display:flex;align-items:center;
  padding:var(--cds-sp-2) var(--cds-sp-3);
  cursor:pointer;transition:background var(--cds-t-fast), transform var(--cds-t-fast);
  border-bottom:1px solid color-mix(in srgb, var(--cds-primary-fg) 8%, transparent);
  gap:var(--cds-sp-3);
  min-height:44px;
}
.theme-option:last-child{border-bottom:none}
.theme-option:hover{background:color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);transform:translateX(2px)}
.theme-option.active{background:color-mix(in srgb, var(--cds-primary-fg) 20%, transparent)}
.theme-preview{width:20px;height:20px;border-radius:4px;overflow:hidden;flex-shrink:0}
.color-swatch{width:100%;height:100%;border-radius:4px}
.theme-name{color:color-mix(in srgb, var(--cds-primary-fg) 90%, transparent);font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-medium);flex:1}
.theme-option .fa-check{color:var(--cds-success);margin-left:auto}
.rotate-180{transform:rotate(180deg)}

/* ---------------------------------------------------------
   26. AUTH (login / forgot-password)
   --------------------------------------------------------- */
.login-container{
  display:flex;flex-direction:row;
  width:100vw;height:100vh;height:100dvh;
  background:var(--cds-surface);
  overflow:hidden;position:relative;
  max-width:100%;
}
.login-container::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cds-primary) 30%, transparent), transparent);
  z-index:1;
}
.login-left{
  flex:1;background:var(--cds-surface);
  display:flex;justify-content:center;align-items:center;
  padding:3rem 2.5rem;position:relative;z-index:2;
  min-width:0;
}
.login-card{
  background:var(--cds-surface);width:100%;max-width:420px;
  transition:all var(--cds-t-base);
  animation:professionalEntrance 0.8s ease-out;
}
.login-card-header{text-align:center;margin-bottom:2.5rem}
.login-logo{height:72px;margin-bottom:1.5rem;transition:transform var(--cds-t-spring);filter:brightness(1.1);max-width:100%;object-fit:contain}
.login-logo:hover{transform:scale(1.05)}
.welcome-text h1{font-size:1.75rem;font-weight:700;color:var(--cds-fg);margin-bottom:0.5rem;letter-spacing:-0.025em}
.welcome-text p{color:var(--cds-fg-muted);font-size:0.95rem;margin:0;font-weight:400}
.login-form{margin-top:2rem}
.form-group{margin-bottom:1.5rem;position:relative}
.form-label{color:var(--cds-fg);font-size:0.9rem;font-weight:600;margin-bottom:0.5rem;display:block;letter-spacing:-0.01em}
.form-control{
  border-radius:var(--cds-r-lg);border:2px solid var(--cds-border);
  background-color:var(--cds-surface);
  padding:0.875rem 1rem;transition:all var(--cds-t-fast);
  font-size:0.95rem;font-weight:400;color:var(--cds-fg);
  width:100%;
}
.form-control:focus{
  background-color:var(--cds-surface);
  border-color:var(--cds-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 15%, transparent);
  outline:none;
}
.form-control::placeholder{color:var(--cds-fg-subtle);opacity:0.7}
.password-group{position:relative}
.password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:var(--cds-surface);border:1px solid var(--cds-border);
  color:var(--cds-fg-muted);cursor:pointer;padding:0.25rem;
  border-radius:var(--cds-r-sm);transition:all var(--cds-t-fast);
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
}
.password-toggle:hover{background:var(--cds-bg-alt);color:var(--cds-primary);transform:translateY(-50%) scale(1.05)}
.password-toggle:active{transform:translateY(-50%) scale(0.95)}
.password-group .form-control{padding-right:50px}
.btn-login{
  background:var(--cds-gradient-brand);border:none;
  border-radius:var(--cds-r-lg);color:var(--cds-primary-fg);
  font-size:1rem;font-weight:600;padding:1rem 2rem;
  width:100%;letter-spacing:0.025em;
  box-shadow:var(--cds-shadow-md);
  transition:var(--cds-t-base);position:relative;overflow:hidden;
  min-height:48px;
}
.btn-login::before{
  content:"";position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}
.btn-login:hover::before{left:100%}
.btn-login:hover{filter:brightness(.95);transform:translateY(-2px);box-shadow:var(--cds-shadow-lg)}
.btn-login:active{transform:translateY(0);box-shadow:var(--cds-shadow-sm)}
.btn-login:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 30%, transparent), var(--cds-shadow-md)}
.btn-login:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.login-links{margin-top:2rem;text-align:center;padding-top:1.5rem;border-top:1px solid var(--cds-border)}
.login-links a{
  color:var(--cds-fg-muted);text-decoration:none;font-size:0.9rem;
  font-weight:500;transition:all var(--cds-t-fast);
  display:inline-block;padding:0.5rem 1rem;border-radius:var(--cds-r-sm);
}
.login-links a:hover{color:var(--cds-primary);background:var(--cds-bg-alt)}

.login-right{
  flex:1.2;position:relative;
  background:var(--cds-gradient-brand);
  display:flex;justify-content:center;align-items:center;
  overflow:hidden;padding:0;
}
.login-right::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%);
  z-index:1;
}
#motivationalCarousel{width:100%;height:100%;position:relative;overflow:hidden;z-index:2}
#motivationalCarousel .carousel-inner{width:100%;height:100%;position:relative}
#motivationalCarousel .carousel-item{
  width:100%;height:100%;display:flex!important;
  justify-content:center;align-items:center;flex-direction:column;
  position:absolute;top:0;left:0;opacity:0;
  transition:opacity 1.3s ease-in-out;
  padding:2rem;box-sizing:border-box;text-align:center;
}
#motivationalCarousel .carousel-item.active{opacity:1;z-index:2;position:absolute}
#motivationalCarousel i{font-size:5rem;color:var(--cds-primary-fg);margin-bottom:1rem;opacity:0.95}
#motivationalCarousel h3,#motivationalCarousel h4{
  font-size:1.9rem;font-weight:700;color:var(--cds-primary-fg);
  margin-bottom:0.5rem;text-shadow:0 2px 4px rgba(0,0,0,0.15);
}
#motivationalCarousel p{
  font-size:1.1rem;color:var(--cds-primary-fg);font-weight:500;
  max-width:80%;margin:0 auto;line-height:1.6;
  text-shadow:0 4px 10px rgba(0,0,0,0.35);
}

.is-invalid{border-color:var(--cds-danger)!important;box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-danger) 15%, transparent)!important}
.login-card.is-invalid{animation:professionalShake 0.5s ease}
@keyframes professionalShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes professionalEntrance{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------------------------------------------------------
   27. FORMULARIO PÚBLICO / ENCUESTA PÚBLICA (wizard)
   --------------------------------------------------------- */
.form-section{
  background:var(--cds-surface);
  border-radius:15px;
  box-shadow:0 5px 25px color-mix(in srgb, var(--cds-primary) 10%, transparent);
  margin-bottom:2rem;border:none;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.form-section:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px color-mix(in srgb, var(--cds-primary) 15%, transparent);
}
.header-card{
  background:var(--cds-gradient-brand);
  color:var(--cds-primary-fg);
  border-radius:15px 15px 0 0;
  padding:2rem;
}
.step-indicator{display:flex;justify-content:center;margin-bottom:2rem;gap:1rem;flex-wrap:wrap}
.step{
  width:35px;height:35px;border-radius:50%;
  background:var(--cds-bg-alt);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--cds-fg-muted);
  transition:all 0.3s ease;
}
.step.active{
  background:var(--cds-gradient-brand);
  color:var(--cds-primary-fg);
  transform:scale(1.1);
}
.step.completed{
  background:var(--cds-success);
  color:#fff;
}
.section-icon{
  width:40px;height:40px;
  background:var(--cds-gradient-brand);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cds-primary-fg);margin-right:1rem;
  flex-shrink:0;
}
.privacy-modal-btn{
  color:var(--cds-primary);text-decoration:underline;
  cursor:pointer;font-weight:500;transition:color 0.3s ease;
  background:transparent;border:none;padding:0;font:inherit;
}
.privacy-modal-btn:hover{color:var(--cds-primary-hover)}
.character-count{font-size:0.75rem;color:var(--cds-fg-muted);text-align:right}
.required-field::after{content:" *";color:var(--cds-danger);font-weight:700}

/* ---------------------------------------------------------
   28. LANDING / WELCOME (compat con Tailwind utility classes)
   --------------------------------------------------------- */
.bg-\[\#FDFDFC\]{background:var(--cds-surface)}
.bg-\[\#fff2f2\]{background:var(--cds-primary-soft)}
.dark\:bg-\[\#0a0a0a\]{background:var(--cds-bg)}
.text-\[\#1b1b18\]{color:var(--cds-fg)}
.text-\[\#706f6c\]{color:var(--cds-fg-muted)}
.text-\[\#f53003\]{color:var(--cds-primary)}

/* ---------------------------------------------------------
   29. MEETING / COMUNICACIÓN (publica.blade.php)
   --------------------------------------------------------- */
.video-container{
  background:#1a1a1a;border-radius:10px;overflow:hidden;min-height:420px;
}
.video-placeholder{
  background:#2d2d2d;color:#fff;
  display:flex;align-items:center;justify-content:center;
  height:100%;min-height:200px;border-radius:8px;overflow:hidden;
  position:relative;
}
.chat-messages{height:400px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.message-bubble{
  background:var(--cds-bg-alt);
  border-radius:15px;
  padding:10px 15px;
  margin-bottom:10px;
  color:var(--cds-fg);
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-width:90%;
}
.message-own{
  background:var(--cds-primary);
  color:var(--cds-primary-fg);
  margin-left:auto;
}

/* ---------------------------------------------------------
   30. UTILIDADES DE LAYOUT (Bootstrap compat)
   --------------------------------------------------------- */
.container-fluid{width:100%;padding-left:var(--cds-sp-6);padding-right:var(--cds-sp-6);margin-left:auto;margin-right:auto;max-width:100%}
.container-fluid.p-0{padding:0}
.container{width:100%;max-width:1200px;margin:0 auto;padding:var(--cds-sp-4)}
.row{display:flex;flex-wrap:wrap;margin-left:calc(-1 * var(--cds-sp-2));margin-right:calc(-1 * var(--cds-sp-2));max-width:100%}
[class*="col-"]{padding-left:var(--cds-sp-2);padding-right:var(--cds-sp-2);min-width:0}
.col-12{flex:0 0 100%;max-width:100%}
.col-6{flex:0 0 50%;max-width:50%}
.col-md-6{flex:0 0 50%;max-width:50%}
.col-md-4{flex:0 0 33.333%;max-width:33.333%}
.col-md-3{flex:0 0 25%;max-width:25%}
.col-md-8{flex:0 0 66.666%;max-width:66.666%}
.col-md-2{flex:0 0 16.666%;max-width:16.666%}
.col-lg-4{flex:0 0 33.333%;max-width:33.333%}
.col-lg-8{flex:0 0 66.666%;max-width:66.666%}
.col-lg-6{flex:0 0 50%;max-width:50%}
.col-xl-2{flex:0 0 16.666%;max-width:16.666%}
.col-xl-3{flex:0 0 25%;max-width:25%}
.col-xl-4{flex:0 0 33.333%;max-width:33.333%}
.col-xl-6{flex:0 0 50%;max-width:50%}
.col-xl-8{flex:0 0 66.666%;max-width:66.666%}

.d-flex{display:flex!important}
.d-none{display:none!important}
.d-block{display:block!important}
.d-grid{display:grid!important}
.d-inline{display:inline!important}
.d-inline-flex{display:inline-flex!important}
.flex-column{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.flex-wrap{flex-wrap:wrap!important}
.flex-grow-1{flex-grow:1!important}
.flex-shrink-0{flex-shrink:0!important}
.align-items-center{align-items:center!important}
.align-items-start{align-items:flex-start!important}
.align-items-end{align-items:flex-end!important}
.align-self-center{align-self:center!important}
.justify-content-center{justify-content:center!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-end{justify-content:flex-end!important}
.justify-content-start{justify-content:flex-start!important}
.gap-1{gap:var(--cds-sp-1)!important}
.gap-2{gap:var(--cds-sp-2)!important}
.gap-3{gap:var(--cds-sp-3)!important}
.gap-4{gap:var(--cds-sp-4)!important}

.mt-0{margin-top:0!important}
.mt-1{margin-top:var(--cds-sp-1)!important}
.mt-2{margin-top:var(--cds-sp-2)!important}
.mt-3{margin-top:var(--cds-sp-3)!important}
.mt-4{margin-top:var(--cds-sp-4)!important}
.mt-5{margin-top:var(--cds-sp-5)!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:var(--cds-sp-1)!important}
.mb-2{margin-bottom:var(--cds-sp-2)!important}
.mb-3{margin-bottom:var(--cds-sp-3)!important}
.mb-4{margin-bottom:var(--cds-sp-4)!important}
.mb-5{margin-bottom:var(--cds-sp-5)!important}
.ms-1{margin-left:var(--cds-sp-1)!important}
.ms-2{margin-left:var(--cds-sp-2)!important}
.ms-3{margin-left:var(--cds-sp-3)!important}
.ms-4{margin-left:var(--cds-sp-4)!important}
.ms-auto{margin-left:auto!important}
.me-1{margin-right:var(--cds-sp-1)!important}
.me-2{margin-right:var(--cds-sp-2)!important}
.me-3{margin-right:var(--cds-sp-3)!important}
.me-4{margin-right:var(--cds-sp-4)!important}
.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.my-2{margin-top:var(--cds-sp-2)!important;margin-bottom:var(--cds-sp-2)!important}
.my-3{margin-top:var(--cds-sp-3)!important;margin-bottom:var(--cds-sp-3)!important}

.p-0{padding:0!important}
.p-1{padding:var(--cds-sp-1)!important}
.p-2{padding:var(--cds-sp-2)!important}
.p-3{padding:var(--cds-sp-3)!important}
.p-4{padding:var(--cds-sp-4)!important}
.p-5{padding:var(--cds-sp-5)!important}
.py-1{padding-top:var(--cds-sp-1)!important;padding-bottom:var(--cds-sp-1)!important}
.py-2{padding-top:var(--cds-sp-2)!important;padding-bottom:var(--cds-sp-2)!important}
.py-3{padding-top:var(--cds-sp-3)!important;padding-bottom:var(--cds-sp-3)!important}
.py-4{padding-top:var(--cds-sp-4)!important;padding-bottom:var(--cds-sp-4)!important}
.px-2{padding-left:var(--cds-sp-2)!important;padding-right:var(--cds-sp-2)!important}
.px-3{padding-left:var(--cds-sp-3)!important;padding-right:var(--cds-sp-3)!important}
.px-4{padding-left:var(--cds-sp-4)!important;padding-right:var(--cds-sp-4)!important}
.px-5{padding-left:var(--cds-sp-5)!important;padding-right:var(--cds-sp-5)!important}

.w-100{width:100%!important}
.w-50{width:50%!important}
.h-100{height:100%!important}
.min-vh-100{min-height:100vh!important}
.text-center{text-align:center!important}
.text-end{text-align:right!important}
.text-start{text-align:left!important}
.fw-normal{font-weight:var(--cds-fw-normal)!important}
.fw-medium{font-weight:var(--cds-fw-medium)!important}
.fw-semibold{font-weight:var(--cds-fw-semibold)!important}
.fw-bold{font-weight:var(--cds-fw-bold)!important}
.fs-sm{font-size:var(--cds-fs-sm)!important}
.fs-xs{font-size:var(--cds-fs-xs)!important}
.fs-lg{font-size:var(--cds-fs-lg)!important}
.small{font-size:var(--cds-fs-sm)!important}
.lead{font-size:var(--cds-fs-lg)!important;font-weight:var(--cds-fw-normal)}
.rounded{border-radius:var(--cds-r-md)!important}
.rounded-circle{border-radius:50%!important}
.rounded-pill{border-radius:var(--cds-r-full)!important}
.rounded-0{border-radius:0!important}
.shadow-sm{box-shadow:var(--cds-shadow-sm)!important}
.shadow{box-shadow:var(--cds-shadow-md)!important}
.shadow-lg{box-shadow:var(--cds-shadow-lg)!important}
.overflow-hidden{overflow:hidden!important}
.position-relative{position:relative!important}
.position-absolute{position:absolute!important}
.position-fixed{position:fixed!important}
.top-0{top:0!important}
.bottom-0{bottom:0!important}
.start-0{left:0!important}
.end-0{right:0!important}
.translate-middle{transform:translate(-50%,-50%)!important}
.top-50{top:50%!important}
.start-50{left:50%!important}
.z-1{z-index:1!important}
.z-2{z-index:2!important}
.z-3{z-index:3!important}
.z-4{z-index:4!important}
.z-5{z-index:5!important}

.text-muted{color:var(--cds-fg-muted)!important}
.text-subtle{color:var(--cds-fg-subtle)!important}
.text-primary{color:var(--cds-primary)!important}
.text-success{color:var(--cds-success)!important}
.text-warning{color:var(--cds-warning)!important}
.text-danger{color:var(--cds-danger)!important}
.text-info{color:var(--cds-info)!important}
.text-inverse{color:var(--cds-fg-inverse)!important}
.text-dark{color:var(--cds-fg)!important}
.text-light{color:var(--cds-fg-muted)!important}
.text-white{color:#fff!important}
.bg-primary{background:var(--cds-primary)!important;color:var(--cds-primary-fg)!important}
.bg-success{background:var(--cds-success)!important;color:#fff!important}
.bg-warning{background:var(--cds-warning)!important;color:#fff!important}
.bg-danger{background:var(--cds-danger)!important;color:#fff!important}
.bg-info{background:var(--cds-info)!important;color:#fff!important}
.bg-light{background:var(--cds-bg-alt)!important}
.bg-white{background:var(--cds-surface)!important}
.bg-dark{background:var(--cds-fg)!important;color:var(--cds-fg-inverse)!important}
.bg-transparent{background:transparent!important}
.border{border:1px solid var(--cds-border)!important}
.border-top{border-top:1px solid var(--cds-border)!important}
.border-bottom{border-bottom:1px solid var(--cds-border)!important}
.border-0{border:none!important}
.border-primary{border-color:var(--cds-primary)!important}
.border-success{border-color:var(--cds-success)!important}
.border-warning{border-color:var(--cds-warning)!important}
.border-danger{border-color:var(--cds-danger)!important}
.border-info{border-color:var(--cds-info)!important}
.border-light{border-color:var(--cds-border)!important}

.btn-group{display:inline-flex}
.btn-group>.cds-btn:not(:first-child),.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.btn-group>.cds-btn:not(:last-child),.btn-group>.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.btn-group-sm>.btn,.btn-group>.btn-sm{padding:var(--cds-sp-1) var(--cds-sp-2);font-size:var(--cds-fs-xs)}

.hover-bg:hover{background:color-mix(in srgb, var(--cds-primary) 5%, transparent)!important}
.action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--cds-border);color:var(--cds-fg-muted);
  background:var(--cds-surface);transition:all var(--cds-t-fast);
  font-size:var(--cds-fs-sm);
}
.action-btn:hover{background:var(--cds-primary);color:var(--cds-primary-fg);border-color:var(--cds-primary);transform:translateY(-1px) scale(1.05);box-shadow:var(--cds-shadow-sm)}
.action-btn:active{transform:translateY(0) scale(0.95)}

kbd{background:var(--cds-bg-alt);color:var(--cds-fg);border:1px solid var(--cds-border-strong);border-bottom-width:2px;padding:1px 6px;border-radius:var(--cds-r-xs);font-size:var(--cds-fs-2xs);font-family:var(--cds-font-mono)}

/* Dropdown bootstrap */
.dropdown-menu.show{display:block}
.dropdown-toggle::after{
  display:inline-block;margin-left:0.255em;vertical-align:0.255em;
  content:"";border-top:0.3em solid;border-right:0.3em solid transparent;
  border-bottom:0;border-left:0.3em solid transparent;
  transition:transform var(--cds-t-fast);
}
.dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.dropdown-menu-end{right:0;left:auto}

/* ---------------------------------------------------------
   31. LIVEWIRE LOADING
   --------------------------------------------------------- */
[wire\:loading]{position:relative;pointer-events:none;opacity:.7;transition:opacity var(--cds-t-base)}
[wire\:loading]::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.6);
  border-radius:var(--cds-r-md);z-index:10;
}
[data-theme="oscuro"] [wire\:loading]::after,[data-theme="corporativo-oscuro"] [wire\:loading]::after{background:rgba(11,18,32,.6)}
.btn[wire\:loading]{color:transparent!important}
.btn[wire\:loading]::after{
  content:'';position:absolute;width:16px;height:16px;top:50%;left:50%;
  margin-left:-8px;margin-top:-8px;border:2px solid transparent;
  border-top-color:currentColor;border-radius:50%;
  animation:cds-spin 1s linear infinite;background:transparent;inset:auto;
}

/* ---------------------------------------------------------
   32. RESPONSIVE — BASE (se amplía en sección 51)
   --------------------------------------------------------- */
@media (max-width:768px){
  .sidebar{transform:translateX(-100%);width:var(--cds-sidebar-w)}
  .sidebar.mobile-open{transform:translateX(0);box-shadow:var(--cds-shadow-xl)}
  .main-content{margin-left:0!important;width:100%!important}
  .dashboard-content{padding:var(--cds-sp-4)}
  .top-navbar{padding:var(--cds-sp-3) var(--cds-sp-4)}
  .sidebar-toggle-mobile{display:flex}
  .stat-card,.chart-container,.cds-card{margin-bottom:var(--cds-sp-3)}
  .stat-card .stat-number{font-size:var(--cds-fs-3xl)}
  .stat-card .stat-icon{width:40px;height:40px;font-size:var(--cds-fs-2xl)}
  .submenu-item{padding:var(--cds-sp-2) var(--cds-sp-3) var(--cds-sp-2) calc(var(--cds-sp-3) + 24px)}
  .sidebar.collapsed .menu-group:hover .submenu{display:none!important}
  .col-md-2,.col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-lg-4,.col-lg-6,.col-lg-8,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-6,.col-xl-8{flex:0 0 100%;max-width:100%}
  .container-fluid{padding-left:var(--cds-sp-3);padding-right:var(--cds-sp-3)}
  .login-container{flex-direction:column;width:90%;height:auto;min-height:95vh;margin:2.5% auto;border-radius:var(--cds-r-lg)}
  .login-right{display:none}
  .login-left{padding:2rem 1.5rem}
  .login-card{max-width:100%}
  .welcome-header{flex-direction:column;gap:var(--cds-sp-4);padding:var(--cds-sp-4)}
  .welcome-actions{align-items:stretch;width:100%}
  .referidor-info-section{flex-direction:column;align-items:flex-start;gap:var(--cds-sp-3)}
  .referidor-stats-section{width:100%;justify-content:space-between}
  .user-network-indicators{flex-direction:column;align-items:flex-start}
  .chart-stats{flex-direction:column;gap:var(--cds-sp-3);align-items:flex-start}
  .chart-stat{text-align:left}
}

@media (max-width:576px){
  .stat-card .stat-number{font-size:var(--cds-fs-2xl)}
  .dashboard-content{padding:var(--cds-sp-3)}
  .cds-page,.page-link{min-width:32px;height:32px;font-size:var(--cds-fs-2xs)}
  .cds-modal,.modal-content{max-width:100%}
  .cds-modal-body,.modal-body{max-height:80vh}
  .login-container{width:95%;border-radius:var(--cds-r-lg)}
  .login-left{padding:1.5rem 1rem}
  .welcome-text h1{font-size:1.5rem}
  .form-control{padding:0.75rem;font-size:0.9rem}
  .btn-login{padding:0.875rem 1.5rem;font-size:0.95rem}
  .login-logo{height:60px}
}

@media (min-width:769px) and (max-width:1024px){
  .sidebar{width:240px}
  .sidebar.collapsed{width:72px}
  .main-content{margin-left:240px;width:calc(100% - 240px)}
  .main-content.sidebar-collapsed{margin-left:72px;width:calc(100% - 72px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

button:focus-visible,a:focus-visible,.menu-item:focus-visible,.theme-selector-trigger:focus-visible{
  outline:2px solid var(--cds-primary);outline-offset:2px;
}

@media (hover: none) and (pointer: coarse){
  .menu-item:hover{background:transparent}
  .stat-card:hover{transform:none}
  .btn-primary-custom:hover{transform:none}
  .menu-item,.theme-selector-trigger,.submenu-item{padding:var(--cds-sp-4) var(--cds-sp-4)}
  .sidebar.collapsed .menu-item{padding:var(--cds-sp-4)}
}

/* =========================================================
   33. OVERRIDES DE BOOTSTRAP — Fuerza a Bootstrap a usar CDS
   ========================================================= */

:root {
    --bs-primary: var(--cds-primary);
    --bs-secondary: var(--cds-fg-muted);
    --bs-success: var(--cds-success);
    --bs-info: var(--cds-info);
    --bs-warning: var(--cds-warning);
    --bs-danger: var(--cds-danger);
    --bs-light: var(--cds-bg-alt);
    --bs-dark: var(--cds-fg);
    --bs-body-bg: var(--cds-bg);
    --bs-body-color: var(--cds-fg);
    --bs-body-font-family: var(--cds-font-sans);
    --bs-body-font-size: var(--cds-fs-md);
    --bs-body-line-height: var(--cds-lh-normal);
    --bs-border-color: var(--cds-border);
    --bs-border-color-translucent: color-mix(in srgb, var(--cds-border) 50%, transparent);
    --bs-secondary-color: var(--cds-fg-muted);
    --bs-secondary-bg: var(--cds-bg-alt);
    --bs-tertiary-bg: var(--cds-bg-alt);
    --bs-tertiary-color: var(--cds-fg-subtle);
    --bs-emphasis-color: var(--cds-fg);
    --bs-heading-color: var(--cds-fg);
    --bs-link-color: var(--cds-primary);
    --bs-link-hover-color: var(--cds-primary-hover);
    --bs-border-radius: var(--cds-r-md);
    --bs-border-radius-sm: var(--cds-r-sm);
    --bs-border-radius-lg: var(--cds-r-lg);
    --bs-border-radius-xl: var(--cds-r-xl);
    --bs-border-radius-xxl: var(--cds-r-2xl);
    --bs-border-radius-pill: var(--cds-r-full);
    --bs-font-sans-serif: var(--cds-font-sans);
    --bs-font-monospace: var(--cds-font-mono);
    --bs-gradient: var(--cds-gradient-brand);
}

body {
    background: var(--cds-bg) !important;
    color: var(--cds-fg) !important;
    font-family: var(--cds-font-sans) !important;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    color: var(--cds-fg) !important;
}

a { color: var(--cds-primary); }
a:hover { color: var(--cds-primary-hover); }

.card {
    background-color: var(--cds-surface) !important;
    color: var(--cds-fg) !important;
    border: 1px solid var(--cds-border) !important;
    border-radius: var(--cds-r-lg) !important;
    box-shadow: var(--cds-shadow-xs) !important;
}

.card-body { color: var(--cds-fg) !important; background: transparent !important; }
.card-header {
    background-color: var(--cds-bg-alt) !important;
    color: var(--cds-fg) !important;
    border-bottom: 1px solid var(--cds-border) !important;
}
.card-footer {
    background-color: var(--cds-bg-alt) !important;
    color: var(--cds-fg) !important;
    border-top: 1px solid var(--cds-border) !important;
}
.card-title { color: var(--cds-fg) !important; }

.card.bg-primary { background-color: var(--cds-primary) !important; color: var(--cds-primary-fg) !important; border-color: var(--cds-primary) !important; }
.card.bg-primary .card-body, .card.bg-primary .card-title, .card.bg-primary h4, .card.bg-primary small { color: var(--cds-primary-fg) !important; }
.card.bg-success { background-color: var(--cds-success) !important; color: #fff !important; border-color: var(--cds-success) !important; }
.card.bg-success .card-body, .card.bg-success .card-title, .card.bg-success h4, .card.bg-success small { color: #fff !important; }
.card.bg-warning { background-color: var(--cds-warning) !important; color: #fff !important; border-color: var(--cds-warning) !important; }
.card.bg-warning .card-body, .card.bg-warning .card-title, .card.bg-warning h4, .card.bg-warning small { color: #fff !important; }
.card.bg-danger { background-color: var(--cds-danger) !important; color: #fff !important; border-color: var(--cds-danger) !important; }
.card.bg-danger .card-body, .card.bg-danger .card-title, .card.bg-danger h4, .card.bg-danger small { color: #fff !important; }
.card.bg-info { background-color: var(--cds-info) !important; color: #fff !important; border-color: var(--cds-info) !important; }
.card.bg-info .card-body, .card.bg-info .card-title, .card.bg-info h4, .card.bg-info small { color: #fff !important; }
.card.bg-dark { background-color: var(--cds-fg) !important; color: var(--cds-fg-inverse) !important; border-color: var(--cds-fg) !important; }
.card.bg-dark .card-body, .card.bg-dark .card-title, .card.bg-dark h4, .card.bg-dark small { color: var(--cds-fg-inverse) !important; }
.card.bg-light { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg) !important; }
.card.bg-light .card-body, .card.bg-light .card-title, .card.bg-light h4 { color: var(--cds-fg) !important; }
.card.bg-white { background-color: var(--cds-surface) !important; color: var(--cds-fg) !important; }

.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:disabled {
    background-color: var(--cds-primary) !important;
    border-color: var(--cds-primary) !important;
    color: var(--cds-primary-fg) !important;
}
.btn-primary:hover {
    background-color: var(--cds-primary-hover) !important;
    border-color: var(--cds-primary-hover) !important;
    color: var(--cds-primary-fg) !important;
}
.btn-secondary, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .btn-secondary:disabled {
    background-color: var(--cds-fg-muted) !important;
    border-color: var(--cds-fg-muted) !important;
    color: var(--cds-fg-inverse) !important;
}
.btn-secondary:hover { background-color: var(--cds-fg) !important; border-color: var(--cds-fg) !important; }
.btn-success, .btn-success:focus, .btn-success:active, .btn-success.active {
    background-color: var(--cds-success) !important;
    border-color: var(--cds-success) !important;
    color: #fff !important;
}
.btn-success:hover { background-color: var(--cds-success-fg) !important; border-color: var(--cds-success-fg) !important; }
.btn-warning, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
    background-color: var(--cds-warning) !important;
    border-color: var(--cds-warning) !important;
    color: #fff !important;
}
.btn-warning:hover { background-color: var(--cds-warning-fg) !important; border-color: var(--cds-warning-fg) !important; }
.btn-danger, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    background-color: var(--cds-danger) !important;
    border-color: var(--cds-danger) !important;
    color: #fff !important;
}
.btn-danger:hover { background-color: var(--cds-danger-fg) !important; border-color: var(--cds-danger-fg) !important; }
.btn-info, .btn-info:focus, .btn-info:active, .btn-info.active {
    background-color: var(--cds-info) !important;
    border-color: var(--cds-info) !important;
    color: #fff !important;
}
.btn-info:hover { background-color: var(--cds-info-fg) !important; border-color: var(--cds-info-fg) !important; }
.btn-light, .btn-light:focus, .btn-light:active {
    background-color: var(--cds-surface) !important;
    border-color: var(--cds-border) !important;
    color: var(--cds-fg) !important;
}
.btn-light:hover { background-color: var(--cds-bg-alt) !important; border-color: var(--cds-border-strong) !important; }
.btn-dark, .btn-dark:focus, .btn-dark:active {
    background-color: var(--cds-fg) !important;
    border-color: var(--cds-fg) !important;
    color: var(--cds-fg-inverse) !important;
}
.btn-dark:hover { background-color: var(--cds-fg-muted) !important; border-color: var(--cds-fg-muted) !important; }

.btn-outline-primary { color: var(--cds-primary) !important; border-color: var(--cds-primary) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    background-color: var(--cds-primary) !important; color: var(--cds-primary-fg) !important; border-color: var(--cds-primary) !important;
}
.btn-outline-secondary { color: var(--cds-fg-muted) !important; border-color: var(--cds-border-strong) !important; background: transparent !important; }
.btn-outline-secondary:hover { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg) !important; }
.btn-outline-success { color: var(--cds-success) !important; border-color: var(--cds-success) !important; background: transparent !important; }
.btn-outline-success:hover { background-color: var(--cds-success) !important; color: #fff !important; }
.btn-outline-warning { color: var(--cds-warning) !important; border-color: var(--cds-warning) !important; background: transparent !important; }
.btn-outline-warning:hover { background-color: var(--cds-warning) !important; color: #fff !important; }
.btn-outline-danger { color: var(--cds-danger) !important; border-color: var(--cds-danger) !important; background: transparent !important; }
.btn-outline-danger:hover { background-color: var(--cds-danger) !important; color: #fff !important; }
.btn-outline-info { color: var(--cds-info) !important; border-color: var(--cds-info) !important; background: transparent !important; }
.btn-outline-info:hover { background-color: var(--cds-info) !important; color: #fff !important; }
.btn-outline-light { color: var(--cds-fg) !important; border-color: var(--cds-border) !important; background: transparent !important; }
.btn-outline-light:hover { background-color: var(--cds-bg-alt) !important; }
.btn-outline-dark { color: var(--cds-fg) !important; border-color: var(--cds-fg) !important; background: transparent !important; }
.btn-outline-dark:hover { background-color: var(--cds-fg) !important; color: var(--cds-fg-inverse) !important; }

.badge.bg-primary, .badge.text-bg-primary { background-color: var(--cds-primary-soft) !important; color: var(--cds-primary-soft-fg) !important; }
.badge.bg-success, .badge.text-bg-success { background-color: var(--cds-success-soft) !important; color: var(--cds-success-fg) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--cds-warning-soft) !important; color: var(--cds-warning-fg) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--cds-danger-soft) !important; color: var(--cds-danger-fg) !important; }
.badge.bg-info, .badge.text-bg-info { background-color: var(--cds-info-soft) !important; color: var(--cds-info-fg) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg-muted) !important; }
.badge.bg-dark, .badge.text-bg-dark { background-color: var(--cds-fg) !important; color: var(--cds-fg-inverse) !important; }
.badge.bg-light, .badge.text-bg-light { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg) !important; }

.table {
    --bs-table-bg: var(--cds-surface);
    --bs-table-color: var(--cds-fg);
    --bs-table-border-color: var(--cds-border);
    --bs-table-striped-bg: color-mix(in srgb, var(--cds-bg-alt) 50%, transparent);
    --bs-table-striped-color: var(--cds-fg);
    --bs-table-hover-bg: var(--cds-bg-alt);
    --bs-table-hover-color: var(--cds-fg);
    color: var(--cds-fg) !important;
    border-color: var(--cds-border) !important;
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--cds-fg);
    border-bottom-color: var(--cds-border);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--cds-bg-alt) !important;
    color: var(--cds-fg) !important;
}
.table > thead { background: var(--cds-bg-alt) !important; }
.table > thead th {
    background: var(--cds-bg-alt) !important;
    color: var(--cds-fg-muted) !important;
    border-color: var(--cds-border) !important;
    text-transform: uppercase;
    font-size: var(--cds-fs-2xs);
    letter-spacing: 0.06em;
}
.table > tbody td {
    background: var(--cds-surface);
    color: var(--cds-fg);
}
.table-success > * { background-color: var(--cds-success-soft) !important; color: var(--cds-success-fg) !important; }
.table-warning > * { background-color: var(--cds-warning-soft) !important; color: var(--cds-warning-fg) !important; }
.table-danger > * { background-color: var(--cds-danger-soft) !important; color: var(--cds-danger-fg) !important; }
.table-info > * { background-color: var(--cds-info-soft) !important; color: var(--cds-info-fg) !important; }
.table-primary > * { background-color: var(--cds-primary-soft) !important; color: var(--cds-primary-soft-fg) !important; }
.table-light { --bs-table-bg: var(--cds-bg-alt); --bs-table-color: var(--cds-fg-muted); background-color: var(--cds-bg-alt) !important; }
.table-dark { --bs-table-bg: var(--cds-fg); --bs-table-color: var(--cds-fg-inverse); background-color: var(--cds-fg) !important; color: var(--cds-fg-inverse) !important; }

.form-control, .form-select {
    background-color: var(--cds-surface) !important;
    color: var(--cds-fg) !important;
    border: 1px solid var(--cds-border-strong) !important;
    border-radius: var(--cds-r-md) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--cds-surface) !important;
    color: var(--cds-fg) !important;
    border-color: var(--cds-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent) !important;
}
.form-control::placeholder { color: var(--cds-fg-subtle) !important; }
.input-group-text {
    background-color: var(--cds-bg-alt) !important;
    color: var(--cds-fg-muted) !important;
    border-color: var(--cds-border-strong) !important;
}
.form-label { color: var(--cds-fg-muted) !important; }
.form-check-input:checked { background-color: var(--cds-primary) !important; border-color: var(--cds-primary) !important; }
.form-check-input:focus { border-color: var(--cds-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent) !important; }

.nav-tabs { border-bottom-color: var(--cds-border) !important; }
.nav-tabs .nav-link { color: var(--cds-fg-muted) !important; }
.nav-tabs .nav-link:hover { color: var(--cds-fg) !important; }
.nav-tabs .nav-link.active {
    color: var(--cds-primary) !important;
    background-color: transparent !important;
    border-color: transparent transparent var(--cds-primary) transparent !important;
}
.nav-pills .nav-link.active { background-color: var(--cds-primary) !important; color: var(--cds-primary-fg) !important; }

.alert-primary { background-color: var(--cds-primary-soft) !important; color: var(--cds-primary-soft-fg) !important; border-color: var(--cds-primary) !important; }
.alert-success { background-color: var(--cds-success-soft) !important; color: var(--cds-success-fg) !important; border-color: var(--cds-success) !important; }
.alert-warning { background-color: var(--cds-warning-soft) !important; color: var(--cds-warning-fg) !important; border-color: var(--cds-warning) !important; }
.alert-danger { background-color: var(--cds-danger-soft) !important; color: var(--cds-danger-fg) !important; border-color: var(--cds-danger) !important; }
.alert-info { background-color: var(--cds-info-soft) !important; color: var(--cds-info-fg) !important; border-color: var(--cds-info) !important; }

.modal-content {
    background-color: var(--cds-surface) !important;
    color: var(--cds-fg) !important;
    border: 1px solid var(--cds-border) !important;
    border-radius: var(--cds-r-xl) !important;
}
.modal-header {
    background-color: var(--cds-surface) !important;
    border-bottom-color: var(--cds-border) !important;
    color: var(--cds-fg) !important;
}
.modal-body { background-color: var(--cds-surface) !important; color: var(--cds-fg) !important; }
.modal-footer {
    background-color: var(--cds-bg-alt) !important;
    border-top-color: var(--cds-border) !important;
    color: var(--cds-fg) !important;
}
.modal-title { color: var(--cds-fg) !important; }
.modal-backdrop { background-color: rgba(2, 6, 23, 0.55) !important; }

.dropdown-menu {
    background-color: var(--cds-surface) !important;
    border-color: var(--cds-border) !important;
    box-shadow: var(--cds-shadow-lg) !important;
    border-radius: var(--cds-r-md) !important;
}
.dropdown-item { color: var(--cds-fg-muted) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg) !important; }
.dropdown-header { color: var(--cds-fg-subtle) !important; }
.dropdown-divider { border-top-color: var(--cds-border) !important; }

.page-link {
    background-color: var(--cds-surface) !important;
    color: var(--cds-fg-muted) !important;
    border-color: var(--cds-border) !important;
}
.page-link:hover { background-color: var(--cds-bg-alt) !important; color: var(--cds-primary) !important; border-color: var(--cds-primary) !important; }
.page-item.active .page-link { background-color: var(--cds-primary) !important; border-color: var(--cds-primary) !important; color: var(--cds-primary-fg) !important; }
.page-item.disabled .page-link { opacity: 0.4 !important; }

.toast { background-color: var(--cds-surface) !important; color: var(--cds-fg) !important; border-color: var(--cds-border) !important; }
.toast-header { background-color: var(--cds-bg-alt) !important; color: var(--cds-fg-muted) !important; border-bottom-color: var(--cds-border) !important; }
.toast-body { color: var(--cds-fg) !important; }

.progress { background-color: var(--cds-bg-alt) !important; }
.progress-bar { background-color: var(--cds-primary) !important; }
.progress-bar.bg-success { background-color: var(--cds-success) !important; }
.progress-bar.bg-warning { background-color: var(--cds-warning) !important; }
.progress-bar.bg-danger { background-color: var(--cds-danger) !important; }
.progress-bar.bg-info { background-color: var(--cds-info) !important; }

.text-primary { color: var(--cds-primary) !important; }
.text-success { color: var(--cds-success) !important; }
.text-warning { color: var(--cds-warning) !important; }
.text-danger { color: var(--cds-danger) !important; }
.text-info { color: var(--cds-info) !important; }
.text-muted { color: var(--cds-fg-muted) !important; }
.text-dark { color: var(--cds-fg) !important; }
.text-light { color: var(--cds-fg-muted) !important; }
.text-white { color: #fff !important; }
.text-body { color: var(--cds-fg) !important; }

.bg-primary { background-color: var(--cds-primary) !important; }
.bg-secondary { background-color: var(--cds-fg-muted) !important; }
.bg-success { background-color: var(--cds-success) !important; }
.bg-warning { background-color: var(--cds-warning) !important; }
.bg-danger { background-color: var(--cds-danger) !important; }
.bg-info { background-color: var(--cds-info) !important; }
.bg-light { background-color: var(--cds-bg-alt) !important; }
.bg-dark { background-color: var(--cds-fg) !important; }
.bg-white { background-color: var(--cds-surface) !important; }
.bg-body { background-color: var(--cds-bg) !important; }

.card.bg-primary .card-body,
.card.bg-success .card-body,
.card.bg-danger .card-body,
.card.bg-info .card-body,
.card.bg-warning .card-body,
.card.bg-dark .card-body { color: #fff !important; }

.border-primary { border-color: var(--cds-primary) !important; }
.border-success { border-color: var(--cds-success) !important; }
.border-warning { border-color: var(--cds-warning) !important; }
.border-danger { border-color: var(--cds-danger) !important; }
.border-info { border-color: var(--cds-info) !important; }
.border-light { border-color: var(--cds-border) !important; }
.border-secondary { border-color: var(--cds-border-strong) !important; }

.bg-primary-subtle { background-color: var(--cds-primary-soft) !important; }
.bg-success-subtle { background-color: var(--cds-success-soft) !important; }
.bg-warning-subtle { background-color: var(--cds-warning-soft) !important; }
.bg-danger-subtle { background-color: var(--cds-danger-soft) !important; }
.bg-info-subtle { background-color: var(--cds-info-soft) !important; }

.btn-group .btn.active,
.btn-group-sm .btn.active {
    background-color: var(--cds-primary) !important;
    color: var(--cds-primary-fg) !important;
    border-color: var(--cds-primary) !important;
}

.list-group-item { background-color: var(--cds-surface) !important; color: var(--cds-fg) !important; border-color: var(--cds-border) !important; }
.list-group-item.active { background-color: var(--cds-primary) !important; color: var(--cds-primary-fg) !important; border-color: var(--cds-primary) !important; }

.spinner-border { color: var(--cds-primary); }
.spinner-grow { color: var(--cds-primary); }

.tooltip-inner { background-color: var(--cds-fg) !important; color: var(--cds-fg-inverse) !important; }
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--cds-fg) !important; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--cds-fg) !important; }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--cds-fg) !important; }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--cds-fg) !important; }

.text-gray-800 { color: var(--cds-fg) !important; }
.text-gray-600 { color: var(--cds-fg-muted) !important; }
.text-gray-700 { color: var(--cds-fg) !important; }

.input-group .form-control,
.input-group .form-select { border-color: var(--cds-border-strong) !important; }
.input-group .form-control:focus,
.input-group .form-select:focus {
    border-color: var(--cds-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent) !important;
    z-index: 3;
}
.input-group .input-group-text {
    background-color: var(--cds-bg-alt) !important;
    color: var(--cds-fg-muted) !important;
}

.btn-close { filter: invert(0.4); transition: transform var(--cds-t-fast), opacity var(--cds-t-fast); }
.btn-close:hover { transform: scale(1.1); }
[data-theme="oscuro"] .btn-close,
[data-theme="corporativo-oscuro"] .btn-close { filter: invert(1) opacity(0.7); }

.modal.show { background: rgba(2, 6, 23, 0.55) !important; backdrop-filter: blur(4px); }

.form-control[type="file"] { background-color: var(--cds-surface) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cds-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--cds-border-strong); border-radius: var(--cds-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--cds-fg-subtle); }

.breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 0 !important; }
.breadcrumb-item a { color: var(--cds-fg-muted) !important; }
.breadcrumb-item a:hover { color: var(--cds-primary) !important; }
.breadcrumb-item.active { color: var(--cds-fg) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cds-fg-subtle) !important; }

*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 35%, transparent) !important;
}

[data-theme="oscuro"] .table,
[data-theme="corporativo-oscuro"] .table {
    --bs-table-bg: var(--cds-surface);
    --bs-table-color: var(--cds-fg);
    --bs-table-border-color: var(--cds-border);
}
[data-theme="oscuro"] .table > :not(caption) > * > *,
[data-theme="corporativo-oscuro"] .table > :not(caption) > * > * {
    color: var(--cds-fg);
    border-bottom-color: var(--cds-border);
}

/* =========================================================
   34. MICROINTERACCIONES Y ANIMACIONES AVANZADAS
   ========================================================= */

@keyframes cds-fade-in-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.cds-animate-in{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both}
.cds-animate-in-d1{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both;animation-delay:80ms}
.cds-animate-in-d2{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both;animation-delay:160ms}
.cds-animate-in-d3{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both;animation-delay:240ms}
.cds-animate-in-d4{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both;animation-delay:320ms}
.cds-animate-in-d5{animation:cds-fade-in-up .5s cubic-bezier(.4,0,.2,1) both;animation-delay:400ms}

.cds-hover-lift{transition:transform var(--cds-t-base), box-shadow var(--cds-t-base)}
.cds-hover-lift:hover{transform:translateY(-3px);box-shadow:var(--cds-shadow-md)}

.cds-focus-glow:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--cds-primary) 15%, transparent), 0 0 20px color-mix(in srgb, var(--cds-primary) 10%, transparent)!important}

.cds-ripple{position:relative;overflow:hidden}
.cds-ripple::after{
  content:'';position:absolute;border-radius:50%;
  width:20px;height:20px;
  background:rgba(255,255,255,.5);
  transform:scale(0);opacity:0;
  top:50%;left:50%;margin-top:-10px;margin-left:-10px;
  pointer-events:none;
}
.cds-ripple:active::after{
  animation:cds-ripple-effect .6s ease-out;
}
@keyframes cds-ripple-effect{
  0%{transform:scale(0);opacity:.6}
  100%{transform:scale(8);opacity:0}
}

.cds-skeleton{position:relative;overflow:hidden}
.cds-skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cds-surface) 60%, transparent), transparent);
  transform:translateX(-100%);
  animation:cds-shimmer-sweep 1.6s infinite;
}
@keyframes cds-shimmer-sweep{
  100%{transform:translateX(100%)}
}

.cds-pulse{animation:cds-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes cds-pulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}
.cds-pulse-ring{position:relative}
.cds-pulse-ring::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid var(--cds-primary);
  animation:cds-pulse-ring 1.8s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events:none;
}
@keyframes cds-pulse-ring{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4)}
}

.cds-bounce{transition:transform var(--cds-t-spring)}
.cds-bounce:hover{animation:cds-bounce .6s cubic-bezier(.4,0,.2,1)}
@keyframes cds-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.cds-shake{animation:cds-shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes cds-shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}

.cds-slide-in-right{animation:cds-slide-in-right .3s cubic-bezier(.4,0,.2,1) both}

.cds-dropdown-anim .dropdown-menu{
  opacity:0;transform:translateY(-6px) scale(.98);
  transition:opacity var(--cds-t-fast), transform var(--cds-t-fast);
}
.cds-dropdown-anim .dropdown-menu.show{
  opacity:1;transform:translateY(0) scale(1);
}

.cds-link-underline{position:relative;transition:color var(--cds-t-fast)}
.cds-link-underline::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--cds-primary);
  transition:width var(--cds-t-base) cubic-bezier(.4,0,.2,1);
}
.cds-link-underline:hover::after{width:100%}

.cds-gradient-text{
  background:var(--cds-gradient-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.cds-gradient-text-animated{
  background:linear-gradient(135deg, var(--cds-primary) 0%, var(--cds-accent) 50%, var(--cds-primary) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:cds-gradient-shift 4s ease infinite;
}
@keyframes cds-gradient-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

[role="button"], .cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}

/* =========================================================
   35. HELPERS DE ACCESIBILIDAD Y FOCUS
   ========================================================= */

.cds-skip-link{
  position:absolute;top:-100px;left:var(--cds-sp-4);
  background:var(--cds-primary);color:var(--cds-primary-fg);
  padding:var(--cds-sp-2) var(--cds-sp-4);
  border-radius:var(--cds-r-md);
  z-index:2000;transition:top var(--cds-t-fast);
}
.cds-skip-link:focus{top:var(--cds-sp-4)}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.cds-btn:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible{
  outline:2px solid var(--cds-primary);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cds-primary) 20%, transparent);
}

.text-muted-contrast{color:color-mix(in srgb, var(--cds-fg-muted) 90%, var(--cds-fg))!important}

/* =========================================================
   36. RESPONSIVE MEJORADO Y PRINT
   ========================================================= */

@media (min-width:1440px){
  .dashboard-content{max-width:1600px;margin:0 auto;width:100%}
}

@media (min-width:1920px){
  :root{--cds-sidebar-w:320px;--cds-sidebar-w-collapsed:88px}
  .dashboard-content{max-width:1800px}
}

@media print{
  .sidebar, .top-navbar, .sidebar-overlay, .sidebar-toggle-mobile{display:none!important}
  .main-content{margin-left:0!important;width:100%!important}
  .dashboard-content{padding:0!important;background:#fff!important}
  .card, .chart-container, .stat-card, .dashboard-card{box-shadow:none!important;border:1px solid #ddd!important;page-break-inside:avoid}
  .btn, .cds-btn{display:none!important}
  body{color:#000!important;background:#fff!important;font-size:11pt}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h1,h2,h3,h4,h5{page-break-after:avoid}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
}

/* =========================================================
   37. OVERRIDES FINALES DE Z-INDEX Y STACKING
   ========================================================= */
:root{
  --cds-z-base:0;
  --cds-z-dropdown:999;
  --cds-z-sticky:1020;
  --cds-z-fixed:1030;
  --cds-z-modal-backdrop:1040;
  --cds-z-modal:1055;
  --cds-z-popover:1060;
  --cds-z-tooltip:1070;
  --cds-z-toast:1100;
  --cds-z-max:2000;
}
.cds-z-dropdown{z-index:var(--cds-z-dropdown)!important}
.cds-z-sticky{z-index:var(--cds-z-sticky)!important}
.cds-z-fixed{z-index:var(--cds-z-fixed)!important}
.cds-z-modal{z-index:var(--cds-z-modal)!important}
.cds-z-popover{z-index:var(--cds-z-popover)!important}
.cds-z-tooltip{z-index:var(--cds-z-tooltip)!important}
.cds-z-toast{z-index:var(--cds-z-toast)!important}

/* =========================================================
   38. OPTIMIZACIONES DE RENDIMIENTO
   ========================================================= */

.cds-contain{contain:layout style paint}
.cds-contain-strict{contain:strict}
.cds-content-visibility{content-visibility:auto;contain-intrinsic-size:auto 500px}

.cds-gpu{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}
.sidebar, .theme-dropdown, .submenu, .modal-content, .cds-toast{transform:translateZ(0);backface-visibility:hidden}

.cds-will-change-transform{will-change:transform}
.cds-will-change-opacity{will-change:opacity}

/* =========================================================
   39. HOVER STATES PARA TOUCH DEVICES
   ========================================================= */
@media (hover:none) and (pointer:coarse){
  .cds-btn:hover,
  .btn:hover,
  .stat-card:hover,
  .dashboard-card:hover,
  .quick-action-btn:hover,
  .action-btn:hover,
  .card:hover,
  .chart-container:hover{
    transform:none!important;
    filter:none!important;
  }
  .menu-item:hover{background:transparent!important}
  .submenu-item:hover{transform:none!important}
  .referidor-card-enhanced:hover{transform:none!important}
  .cds-hover-lift:hover{transform:none!important;box-shadow:var(--cds-shadow-xs)!important}
}

/* =========================================================
   40. TEMAS OSCUROS REFINADOS
   ========================================================= */

[data-theme="oscuro"] input::placeholder,
[data-theme="oscuro"] textarea::placeholder,
[data-theme="corporativo-oscuro"] input::placeholder,
[data-theme="corporativo-oscuro"] textarea::placeholder{
  color:var(--cds-fg-subtle)!important;
  opacity:.8;
}

[data-theme="oscuro"] ::selection,
[data-theme="corporativo-oscuro"] ::selection{
  background:var(--cds-primary);
  color:var(--cds-primary-fg);
}

[data-theme="oscuro"] ::-webkit-scrollbar-thumb,
[data-theme="corporativo-oscuro"] ::-webkit-scrollbar-thumb{
  background:var(--cds-border-strong);
}
[data-theme="oscuro"] ::-webkit-scrollbar-thumb:hover,
[data-theme="corporativo-oscuro"] ::-webkit-scrollbar-thumb:hover{
  background:var(--cds-fg-muted);
}

[data-theme="oscuro"] .table tbody tr:hover td,
[data-theme="corporativo-oscuro"] .table tbody tr:hover td{
  background:color-mix(in srgb, var(--cds-primary) 8%, transparent)!important;
}

/* =========================================================
   41. FIX DEFINITIVO MULTI-FLECHA EN <select>
   ========================================================= */
.form-select,
select:not([multiple]):not([size]),
.cds-select,
.filter-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: var(--cds-select-arrow-light) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 14px !important;
    padding-right: 2.25rem !important;
}

.form-select,
select:not([multiple]):not([size]) {
    min-height: 38px !important;
    line-height: 1.5 !important;
}

.form-select-sm,
select.form-select-sm {
    padding-right: 2rem !important;
    background-position: right 0.55rem center !important;
    background-size: 12px 12px !important;
    min-height: 32px !important;
}

.form-select-lg {
    padding-right: 2.75rem !important;
    background-position: right 1rem center !important;
    background-size: 16px 16px !important;
    min-height: 48px !important;
}

[data-theme="oscuro"] .form-select,
[data-theme="oscuro"] select:not([multiple]):not([size]),
[data-theme="oscuro"] .cds-select,
[data-theme="oscuro"] .filter-select,
[data-theme="corporativo-oscuro"] .form-select,
[data-theme="corporativo-oscuro"] select:not([multiple]):not([size]),
[data-theme="corporativo-oscuro"] .cds-select,
[data-theme="corporativo-oscuro"] .filter-select {
    background-image: var(--cds-select-arrow-dark) !important;
}

select[multiple],
select[size]:not([size="1"]),
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    background-image: none !important;
    padding-right: 0.75rem !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    min-height: auto !important;
}

.input-group > .form-select,
.input-group > select:not([multiple]):not([size]) {
    background-position: right 0.55rem center !important;
    background-size: 12px 12px !important;
    padding-right: 2rem !important;
}

.table .form-select,
.table select:not([multiple]):not([size]) {
    padding-right: 1.75rem !important;
    background-position: right 0.4rem center !important;
    background-size: 11px 11px !important;
}

.form-select:disabled,
select:disabled:not([multiple]):not([size]) {
    opacity: 0.6 !important;
    background-image: var(--cds-select-arrow-disabled) !important;
}

.form-select:focus,
select:not([multiple]):not([size]):focus,
.cds-select:focus,
.filter-select:focus {
    background-image: var(--cds-select-arrow-light) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 14px !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent) !important;
}

[data-theme="oscuro"] .form-select:focus,
[data-theme="oscuro"] select:not([multiple]):not([size]):focus,
[data-theme="corporativo-oscuro"] .form-select:focus,
[data-theme="corporativo-oscuro"] select:not([multiple]):not([size]):focus {
    background-image: var(--cds-select-arrow-dark) !important;
    background-position: right 0.75rem center !important;
}

.form-select {
    background-image: var(--cds-select-arrow-light) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 14px !important;
    padding-right: 2.25rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

[data-theme="oscuro"] .form-select,
[data-theme="corporativo-oscuro"] .form-select {
    background-image: var(--cds-select-arrow-dark) !important;
}

/* =========================================================
   42. HELPERS DE FORMULARIOS AVANZADOS (UX/UI)
   ========================================================= */

.cds-floating{
  position:relative;
  margin-bottom:var(--cds-sp-4);
}
.cds-floating .form-control,
.cds-floating .form-select{
  height:56px;
  padding:20px 14px 6px 14px;
  font-size:var(--cds-fs-md);
}
.cds-floating .form-select{
  padding-right:2.25rem !important;
}
.cds-floating label{
  position:absolute;
  top:50%;left:14px;
  transform:translateY(-50%);
  font-size:var(--cds-fs-md);
  color:var(--cds-fg-muted);
  pointer-events:none;
  transition:all var(--cds-t-fast);
  background:transparent;
  padding:0 2px;
}
.cds-floating .form-control:focus ~ label,
.cds-floating .form-control:not(:placeholder-shown) ~ label,
.cds-floating .form-select:focus ~ label,
.cds-floating .form-select:not([value=""]):valid ~ label{
  top:6px;
  transform:none;
  font-size:var(--cds-fs-2xs);
  color:var(--cds-primary);
  font-weight:var(--cds-fw-semibold);
}

.cds-check{
  display:flex;align-items:flex-start;gap:var(--cds-sp-2);
  padding:var(--cds-sp-2);border-radius:var(--cds-r-md);
  cursor:pointer;transition:background var(--cds-t-fast);
  user-select:none;
  min-height:var(--cds-touch-target);
}
.cds-check:hover{background:var(--cds-bg-alt)}
.cds-check input[type="checkbox"],
.cds-check input[type="radio"]{
  width:18px;height:18px;flex-shrink:0;margin-top:2px;
  accent-color:var(--cds-primary);
  cursor:pointer;
}
.cds-check .cds-check-label{
  font-size:var(--cds-fs-sm);color:var(--cds-fg);
  line-height:1.4;
}
.cds-check .cds-check-help{
  display:block;font-size:var(--cds-fs-2xs);
  color:var(--cds-fg-muted);margin-top:2px;
}

.cds-file{
  display:flex;align-items:center;gap:var(--cds-sp-3);
  padding:var(--cds-sp-3);border:2px dashed var(--cds-border-strong);
  border-radius:var(--cds-r-md);cursor:pointer;
  transition:border-color var(--cds-t-fast), background var(--cds-t-fast);
  background:var(--cds-surface);
}
.cds-file:hover{border-color:var(--cds-primary);background:var(--cds-primary-soft)}
.cds-file:focus-within{border-color:var(--cds-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--cds-primary) 20%, transparent)}
.cds-file input[type="file"]{
  position:absolute;opacity:0;width:1px;height:1px;
}
.cds-file .cds-file-icon{
  width:40px;height:40px;border-radius:var(--cds-r-md);
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-lg);flex-shrink:0;
}
.cds-file .cds-file-text{
  flex:1;font-size:var(--cds-fs-sm);color:var(--cds-fg);
}
.cds-file .cds-file-help{
  display:block;font-size:var(--cds-fs-2xs);color:var(--cds-fg-muted);
  margin-top:2px;
}

.cds-fieldset{
  border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);
  padding:var(--cds-sp-4);
  margin-bottom:var(--cds-sp-4);
  background:var(--cds-surface);
}
.cds-legend{
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-semibold);
  color:var(--cds-fg);padding:0 var(--cds-sp-2);
}
.cds-legend-help{
  display:block;font-size:var(--cds-fs-2xs);
  color:var(--cds-fg-muted);font-weight:var(--cds-fw-normal);
  margin-top:2px;
}

.cds-pwd-strength{
  display:flex;gap:3px;margin-top:var(--cds-sp-1);
}
.cds-pwd-strength span{
  flex:1;height:4px;border-radius:2px;
  background:var(--cds-border);
  transition:background var(--cds-t-base);
}
.cds-pwd-strength[data-level="1"] span:nth-child(1){background:var(--cds-danger)}
.cds-pwd-strength[data-level="2"] span:nth-child(-n+2){background:var(--cds-warning)}
.cds-pwd-strength[data-level="3"] span:nth-child(-n+3){background:var(--cds-info)}
.cds-pwd-strength[data-level="4"] span{background:var(--cds-success)}

.cds-input-icon{
  position:relative;
}
.cds-input-icon .cds-input-icon-glyph{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);
  color:var(--cds-fg-muted);pointer-events:none;
}
.cds-input-icon .form-control{
  padding-left:38px !important;
}

/* =========================================================
   43. HELPERS DE EMPTY STATES Y SKELETONS
   ========================================================= */

.cds-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:var(--cds-sp-10) var(--cds-sp-4);
  color:var(--cds-fg-muted);
}
.cds-empty-icon{
  width:80px;height:80px;border-radius:50%;
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cds-fs-4xl);margin-bottom:var(--cds-sp-4);
  transition:transform var(--cds-t-spring);
}
.cds-empty:hover .cds-empty-icon{transform:scale(1.08) rotate(-3deg)}
.cds-empty-title{
  font-size:var(--cds-fs-lg);font-weight:var(--cds-fw-semibold);
  color:var(--cds-fg);margin-bottom:var(--cds-sp-2);
}
.cds-empty-text{
  font-size:var(--cds-fs-sm);color:var(--cds-fg-muted);
  max-width:400px;margin-bottom:var(--cds-sp-4);
}
.cds-empty-actions{display:flex;gap:var(--cds-sp-2);flex-wrap:wrap;justify-content:center}

.cds-skeleton-card{
  background:var(--cds-surface);border:1px solid var(--cds-border);
  border-radius:var(--cds-r-lg);padding:var(--cds-sp-4);
  box-shadow:var(--cds-shadow-xs);
}
.cds-skeleton-line{
  height:12px;border-radius:var(--cds-r-sm);
  background:linear-gradient(90deg,var(--cds-bg-alt) 25%,var(--cds-border) 37%,var(--cds-bg-alt) 63%);
  background-size:400% 100%;
  animation:cds-shimmer 1.4s ease-in-out infinite;
  margin-bottom:var(--cds-sp-2);
}
.cds-skeleton-line.w-75{width:75%}
.cds-skeleton-line.w-50{width:50%}
.cds-skeleton-line.w-25{width:25%}
.cds-skeleton-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(90deg,var(--cds-bg-alt) 25%,var(--cds-border) 37%,var(--cds-bg-alt) 63%);
  background-size:400% 100%;
  animation:cds-shimmer 1.4s ease-in-out infinite;
  margin-bottom:var(--cds-sp-3);
}

/* =========================================================
   44. HELPERS DE STATUS Y BADGES ANIMADOS
   ========================================================= */

.cds-status{
  display:inline-flex;align-items:center;gap:var(--cds-sp-2);
  font-size:var(--cds-fs-sm);font-weight:var(--cds-fw-medium);
}
.cds-status-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  position:relative;
}
.cds-status-dot.online{background:var(--cds-success)}
.cds-status-dot.online::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid var(--cds-success);
  animation:cds-pulse-ring 1.8s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events:none;
}
.cds-status-dot.offline{background:var(--cds-fg-subtle)}
.cds-status-dot.warning{background:var(--cds-warning)}
.cds-status-dot.danger{background:var(--cds-danger)}

.cds-badge-pulse{
  position:relative;
  animation:cds-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

.cds-chip{
  display:inline-flex;align-items:center;gap:var(--cds-sp-1);
  padding:var(--cds-sp-1) var(--cds-sp-3);
  border-radius:var(--cds-r-full);
  background:var(--cds-primary-soft);color:var(--cds-primary-soft-fg);
  font-size:var(--cds-fs-xs);font-weight:var(--cds-fw-medium);
  border:1px solid color-mix(in srgb, var(--cds-primary) 30%, transparent);
  transition:all var(--cds-t-fast);
}
.cds-chip:hover{background:var(--cds-primary);color:var(--cds-primary-fg);transform:translateY(-1px)}
.cds-chip-remove{
  background:none;border:none;color:inherit;
  cursor:pointer;padding:0;margin-left:2px;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  transition:background var(--cds-t-fast);
}
.cds-chip-remove:hover{background:rgba(0,0,0,.15)}

/* =========================================================
   45. PRINT Y ACCESIBILIDAD REFINADOS
   ========================================================= */
@media print{
  .no-print{display:none!important}
  .print-only{display:block!important}
  a{color:#000!important;text-decoration:underline!important}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  img{max-width:100%!important;page-break-inside:avoid}
  .card, .chart-container, .stat-card{break-inside:avoid}
}

@media (prefers-reduced-motion: reduce){
  .cds-pulse,
  .cds-pulse-ring::after,
  .cds-badge-pulse,
  .service-indicator.online,
  .cds-status-dot.online::after,
  .activity-dot.unread,
  .cds-animate-in,
  .cds-animate-in-d1,
  .cds-animate-in-d2,
  .cds-animate-in-d3,
  .cds-animate-in-d4,
  .cds-animate-in-d5,
  .cds-shake{
    animation:none!important;
  }
}

/* =========================================================
   46. THEME DRAWER (panel lateral de temas)
   ========================================================= */

:root{
  --cds-theme-drawer-w: 360px;
  --cds-theme-drawer-w-mobile: 88vw;
  --cds-theme-drawer-bg: var(--cds-surface);
  --cds-theme-drawer-border: var(--cds-border);
  --cds-theme-drawer-shadow: var(--cds-shadow-xl);
  --cds-theme-drawer-z-backdrop: 1400;
  --cds-theme-drawer-z: 1410;
}

.cds-theme-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--cds-theme-drawer-z-backdrop);
  animation: cds-drawer-fade-in 180ms ease-out;
}

@keyframes cds-drawer-fade-in{
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cds-theme-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: var(--cds-theme-drawer-w);
  max-width: 100vw;
  background: var(--cds-theme-drawer-bg);
  color: var(--cds-fg);
  border-left: 1px solid var(--cds-theme-drawer-border);
  box-shadow: var(--cds-theme-drawer-shadow);
  z-index: var(--cds-theme-drawer-z);
  display: flex;
  flex-direction: column;
  animation: cds-drawer-slide-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--cds-safe-top);
  padding-bottom: var(--cds-safe-bottom);
}

@keyframes cds-drawer-slide-in{
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (min-width: 769px){
  .cds-theme-drawer{
    left: var(--cds-sidebar-w);
    right: auto;
    width: var(--cds-theme-drawer-w);
    border-left: 1px solid var(--cds-theme-drawer-border);
    border-right: 1px solid var(--cds-theme-drawer-border);
    animation: cds-drawer-slide-in-left 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar.collapsed ~ .cds-theme-drawer,
  body.sidebar-collapsed .cds-theme-drawer{
    left: var(--cds-sidebar-w-collapsed);
  }
}

@keyframes cds-drawer-slide-in-left{
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px){
  .cds-theme-drawer{
    width: var(--cds-theme-drawer-w-mobile);
    left: auto;
    right: 0;
    border-left: 1px solid var(--cds-theme-drawer-border);
    border-right: none;
    border-top-left-radius: var(--cds-r-lg);
    border-bottom-left-radius: var(--cds-r-lg);
    animation: cds-drawer-slide-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.cds-theme-drawer-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-sp-3);
  padding: var(--cds-sp-4) var(--cds-sp-5);
  border-bottom: 1px solid var(--cds-border);
  background: var(--cds-surface);
  flex-shrink: 0;
}

.cds-theme-drawer-icon{
  width: 40px;
  height: 40px;
  border-radius: var(--cds-r-md);
  background: var(--cds-primary-soft);
  color: var(--cds-primary-soft-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cds-fs-lg);
}

.cds-theme-drawer-title{
  font-size: var(--cds-fs-lg);
  font-weight: var(--cds-fw-semibold);
  color: var(--cds-fg);
  margin: 0;
  line-height: 1.2;
}

.cds-theme-drawer-subtitle{
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  margin: 2px 0 0;
}

.cds-theme-drawer-close{
  background: transparent;
  border: 1px solid var(--cds-border);
  color: var(--cds-fg-muted);
  width: 34px;
  height: 34px;
  border-radius: var(--cds-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cds-t-fast);
  flex-shrink: 0;
}

.cds-theme-drawer-close:hover{
  background: var(--cds-danger-soft);
  color: var(--cds-danger-fg);
  border-color: var(--cds-danger);
  transform: rotate(90deg);
}

.cds-theme-drawer-close:focus-visible{
  outline: 2px solid var(--cds-primary);
  outline-offset: 2px;
}

.cds-theme-drawer-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--cds-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--cds-sp-2);
  background: var(--cds-bg-alt);
  scrollbar-width: thin;
  scrollbar-color: var(--cds-border-strong) transparent;
  -webkit-overflow-scrolling: touch;
}

.cds-theme-drawer-body::-webkit-scrollbar{
  width: 8px;
}
.cds-theme-drawer-body::-webkit-scrollbar-track{
  background: transparent;
}
.cds-theme-drawer-body::-webkit-scrollbar-thumb{
  background: var(--cds-border-strong);
  border-radius: var(--cds-r-full);
}
.cds-theme-drawer-body::-webkit-scrollbar-thumb:hover{
  background: var(--cds-fg-subtle);
}

.cds-theme-option{
  display: flex;
  align-items: center;
  gap: var(--cds-sp-3);
  padding: var(--cds-sp-3) var(--cds-sp-4);
  background: var(--cds-surface);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-r-md);
  cursor: pointer;
  text-align: left;
  color: var(--cds-fg);
  transition: all var(--cds-t-fast);
  width: 100%;
  font: inherit;
  position: relative;
  min-height: var(--cds-touch-target);
}

.cds-theme-option:hover{
  border-color: var(--cds-primary);
  background: var(--cds-surface);
  transform: translateX(2px);
  box-shadow: var(--cds-shadow-sm);
}

.cds-theme-option:focus-visible{
  outline: 2px solid var(--cds-primary);
  outline-offset: 2px;
}

.cds-theme-option.is-active{
  border-color: var(--cds-primary);
  background: var(--cds-primary-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cds-primary) 20%, transparent);
}

.cds-theme-option-swatch{
  width: 32px;
  height: 32px;
  border-radius: var(--cds-r-md);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.cds-theme-option-body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cds-theme-option-name{
  font-size: var(--cds-fs-sm);
  font-weight: var(--cds-fw-semibold);
  color: var(--cds-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cds-theme-option-id{
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  font-family: var(--cds-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cds-theme-option-check{
  color: var(--cds-primary);
  font-size: var(--cds-fs-sm);
  flex-shrink: 0;
}

.cds-theme-drawer-footer{
  padding: var(--cds-sp-3) var(--cds-sp-4);
  border-top: 1px solid var(--cds-border);
  background: var(--cds-surface);
  flex-shrink: 0;
}

.cds-theme-drawer-hint{
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--cds-sp-1);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce){
  .cds-theme-drawer,
  .cds-theme-drawer-backdrop{
    animation: none !important;
  }
  .cds-theme-drawer-close:hover{
    transform: none;
  }
}

/* =========================================================
   47. NAVBAR USER DROPDOWN — sin flecha duplicada
   ========================================================= */

.user-dropdown-toggle{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: var(--cds-fg);
  cursor: pointer;
  border-radius: var(--cds-r-md);
  transition: background var(--cds-t-fast);
  min-height: var(--cds-touch-target);
}
.user-dropdown-toggle:hover{
  background: var(--cds-bg-alt);
}
.user-dropdown-toggle:focus-visible{
  outline: 2px solid var(--cds-primary);
  outline-offset: 2px;
}

.user-dropdown-toggle.dropdown-toggle::after{
  display: none !important;
  content: none !important;
}

.user-dropdown-chevron{
  color: var(--cds-fg-muted);
  font-size: 0.75rem;
  transition: transform var(--cds-t-base);
}
.user-dropdown-toggle[aria-expanded="true"] .user-dropdown-chevron{
  transform: rotate(180deg);
}

.user-dropdown-toggle .user-avatar{
  width: 35px;
  height: 35px;
  font-size: 0.8rem;
}

.user-dropdown-info{
  line-height: 1.2;
}

.user-dropdown .dropdown-menu{
  min-width: 240px;
}

/* =========================================================
   48. STACKING CONTEXT Y OVERFLOW — garantías para el drawer
   ========================================================= */

#cds-theme-drawer-root{
  position: relative;
  z-index: var(--cds-theme-drawer-z);
  pointer-events: none;
}

#cds-theme-drawer-root > *{
  pointer-events: auto;
}

[data-theme="oscuro"] .cds-theme-drawer-backdrop,
[data-theme="corporativo-oscuro"] .cds-theme-drawer-backdrop{
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="oscuro"] .cds-theme-option-swatch,
[data-theme="corporativo-oscuro"] .cds-theme-option-swatch{
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* =========================================================
   49. RESPONSIVE FINO DEL THEME DRAWER
   ========================================================= */
@media (max-width: 480px){
  .cds-theme-drawer{
    width: 92vw;
  }
  .cds-theme-drawer-header{
    padding: var(--cds-sp-3) var(--cds-sp-4);
  }
  .cds-theme-drawer-body{
    padding: var(--cds-sp-2);
  }
  .cds-theme-option{
    padding: var(--cds-sp-2) var(--cds-sp-3);
  }
  .cds-theme-option-name{
    font-size: var(--cds-fs-xs);
  }
}

@media (max-height: 480px) and (orientation: landscape){
  .cds-theme-drawer-header{
    padding: var(--cds-sp-2) var(--cds-sp-3);
  }
  .cds-theme-drawer-footer{
    padding: var(--cds-sp-2) var(--cds-sp-3);
  }
  .cds-theme-option{
    padding: var(--cds-sp-2) var(--cds-sp-3);
  }
}

/* =========================================================
   50. COMPATIBILIDAD CON EL WRAPPER ANTIGUO DEL TRIGGER
   ========================================================= */

.theme-selector-trigger-wrap{
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.theme-selector-trigger-wrap .theme-selector-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--cds-sp-3) var(--cds-sp-4);
  color: color-mix(in srgb, var(--cds-primary-fg) 90%, transparent);
  background: transparent;
  border: none;
  border-left: 4px solid transparent;
  margin: 2px 0;
  white-space: nowrap;
  border-radius: var(--cds-r-md);
  font-size: var(--cds-fs-sm);
  font-weight: var(--cds-fw-medium);
  cursor: pointer;
  transition: all var(--cds-t-fast);
  text-align: left;
  min-height: var(--cds-touch-target);
}

.theme-selector-trigger-wrap .theme-selector-trigger:hover{
  background: color-mix(in srgb, var(--cds-primary-fg) 20%, transparent);
  color: var(--cds-primary-fg);
  border-left-color: var(--cds-primary-fg);
}

.sidebar.collapsed .theme-selector-trigger-wrap .theme-selector-trigger{
  padding: var(--cds-sp-3) var(--cds-sp-2);
  justify-content: center;
}

.sidebar.collapsed .theme-selector-trigger-wrap .theme-label{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

/* =========================================================
   51. RESPONSIVE MOBILE-FIRST COMPLETO (v1.5 NUEVA)
   ========================================================= */

/* ----- 51.1 Breakpoints oficiales CDS -----
   xs:  < 576px   (móvil pequeño)
   sm:  576-767px (móvil grande)
   md:  768-991px (tablet)
   lg:  992-1199px (desktop pequeño)
   xl:  1200-1439px (desktop)
   xxl: >= 1440px (desktop grande)
   ========================================= */

/* ----- 51.2 Tipografía fluida con clamp() ----- */
:root {
  --cds-fs-fluid-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --cds-fs-fluid-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --cds-fs-fluid-md: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --cds-fs-fluid-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --cds-fs-fluid-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --cds-fs-fluid-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --cds-fs-fluid-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --cds-fs-fluid-4xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.25rem);
}

/* Aplicar tipografía fluida al body en pantallas menores a 1200px */
@media (max-width: 1199.98px) {
  body { font-size: var(--cds-fs-fluid-md); }
  h1, .h1 { font-size: var(--cds-fs-fluid-4xl); }
  h2, .h2 { font-size: var(--cds-fs-fluid-3xl); }
  h3, .h3 { font-size: var(--cds-fs-fluid-2xl); }
  h4, .h4 { font-size: var(--cds-fs-fluid-xl); }
  h5, .h5 { font-size: var(--cds-fs-fluid-lg); }
}

/* ----- 51.3 Container queries básicas para cards ----- */
.dashboard-content {
  container-type: inline-size;
  container-name: dashboard;
}

@container dashboard (max-width: 700px) {
  .stat-card .stat-icon {
    width: 40px;
    height: 40px;
    font-size: var(--cds-fs-2xl);
  }
  .stat-card .stat-number {
    font-size: var(--cds-fs-3xl);
  }
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-sp-2);
  }
  .referidor-card-enhanced {
    padding: var(--cds-sp-3);
    gap: var(--cds-sp-3);
  }
  .referidor-stats-section {
    flex-wrap: wrap;
    gap: var(--cds-sp-2);
  }
}

@container dashboard (max-width: 500px) {
  .referidor-card-enhanced {
    flex-direction: column;
    align-items: flex-start;
  }
  .referidor-info-section {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .referidor-numbers {
    width: 100%;
    justify-content: space-between;
  }
  .rank-badge {
    width: 48px;
    height: 48px;
    font-size: var(--cds-fs-md);
  }
}

/* ----- 51.4 Colapso inteligente del grid de stat cards ----- */
@media (max-width: 1399.98px) {
  /* XL: 4 columnas ya definidas por Bootstrap (col-xl-3) */
}

@media (max-width: 1199.98px) {
  /* LG: 3 columnas para stat cards */
  .row.g-4 > [class*="col-xl-3"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 991.98px) {
  /* MD: 2 columnas para stat cards */
  .row.g-4 > [class*="col-xl-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.g-4 > [class*="col-xl-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.g-4 > [class*="col-xl-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.g-4 > [class*="col-xl-8"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  /* SM: 2 columnas para stat cards */
  .row.g-4 > [class*="col-xl-3"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row.g-4 > [class*="col-xl-4"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* XS: 1 columna para stat cards muy pequeños */
  .row.g-4 > [class*="col-xl-3"][style*="border-left-color"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Los 4 stat cards principales se mantienen en 2x2 */
  .row.g-4 > .col-xl-3.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ----- 51.5 Ajustes de espaciado progresivo ----- */
@media (max-width: 991.98px) {
  .dashboard-content {
    padding: var(--cds-sp-4);
  }
  .welcome-header {
    padding: var(--cds-sp-5);
    margin-bottom: var(--cds-sp-4);
  }
}

@media (max-width: 767.98px) {
  .dashboard-content {
    padding: var(--cds-sp-3);
  }
  .welcome-header {
    padding: var(--cds-sp-4);
    margin-bottom: var(--cds-sp-3);
  }
  .chart-container {
    padding: var(--cds-sp-3);
    margin-bottom: var(--cds-sp-3);
  }
  .table-section {
    margin-bottom: var(--cds-sp-3);
  }
}

@media (max-width: 575.98px) {
  .dashboard-content {
    padding: var(--cds-sp-2);
  }
  .chart-container {
    padding: var(--cds-sp-2);
    border-radius: var(--cds-r-md);
  }
  .stat-card {
    padding: var(--cds-sp-3);
    border-radius: var(--cds-r-md);
  }
  .dashboard-card {
    border-radius: var(--cds-r-md);
  }
}

/* ----- 51.6 Ocultar/mostrar por breakpoint (utilidades) ----- */
@media (max-width: 767.98px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: block !important; }
  .d-md-block { display: block !important; }
}

@media (max-width: 575.98px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline { display: inline !important; }
}

/* =========================================================
   52. MEJORAS ESPECÍFICAS PARA CELULAR (v1.5 NUEVA)
   ========================================================= */

/* ----- 52.1 Touch targets mínimos de 44px ----- */
@media (max-width: 991.98px) {
  .btn,
  .cds-btn,
  .btn-primary-custom,
  .action-btn,
  .dropdown-item,
  .menu-item,
  .submenu-item,
  .nav-link,
  .nav-tabs .nav-link,
  .page-link,
  .theme-option {
    min-height: var(--cds-touch-target);
  }

  .action-btn {
    min-width: var(--cds-touch-target);
    min-height: var(--cds-touch-target);
    width: var(--cds-touch-target);
    height: var(--cds-touch-target);
  }

  .btn-sm,
  .cds-btn-sm {
    min-height: 36px;
  }

  .form-control,
  .form-select,
  .cds-input,
  .cds-select {
    min-height: var(--cds-touch-target);
    font-size: 16px; /* Evita zoom automático en iOS al enfocar */
  }

  .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  /* Evitar zoom en iOS en inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ----- 52.2 Safe areas iOS (notch y home indicator) ----- */
@supports (padding: env(safe-area-inset-bottom)) {
  .dashboard-content {
    padding-bottom: calc(var(--cds-sp-4) + env(safe-area-inset-bottom, 0px));
  }

  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .top-navbar {
    padding-top: calc(var(--cds-sp-3) + env(safe-area-inset-top, 0px));
  }

  .cds-toast-stack {
    top: calc(var(--cds-sp-5) + env(safe-area-inset-top, 0px));
    right: calc(var(--cds-sp-3) + env(safe-area-inset-right, 0px));
    left: calc(var(--cds-sp-3) + env(safe-area-inset-left, 0px));
  }

  .cds-toast {
    max-width: 100%;
  }

  .modal-content,
  .cds-modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ----- 52.3 Scroll horizontal controlado (no body, sí tablas) ----- */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .table-responsive,
  .cds-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /* Indicador visual de scroll horizontal */
  .table-responsive::after {
    content: 'Desliza →';
    display: block;
    text-align: center;
    font-size: var(--cds-fs-2xs);
    color: var(--cds-fg-subtle);
    padding: var(--cds-sp-1) 0;
    opacity: 0.7;
  }

  /* Ocultar el hint cuando ya no hay overflow */
  .table-responsive.no-overflow::after {
    display: none;
  }
}

/* ----- 52.4 Tipografía más legible en móvil ----- */
@media (max-width: 575.98px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1, .h1 { font-size: 1.5rem; line-height: 1.2; }
  h2, .h2 { font-size: 1.375rem; line-height: 1.25; }
  h3, .h3 { font-size: 1.25rem; line-height: 1.3; }
  h4, .h4 { font-size: 1.125rem; line-height: 1.35; }
  h5, .h5 { font-size: 1rem; }
  h6, .h6 { font-size: 0.9375rem; }

  p { margin-bottom: var(--cds-sp-2); }

  .text-muted { font-size: 0.8125rem; }
  small, .small { font-size: 0.75rem !important; }
}

/* ----- 52.5 Espaciado entre elementos táctiles ----- */
@media (hover: none) and (pointer: coarse) {
  .btn-group {
    gap: var(--cds-sp-1);
  }

  .btn-group > .btn {
    margin: 0 !important;
  }

  .action-buttons {
    gap: var(--cds-sp-2);
  }

  .dropdown-item {
    padding-top: var(--cds-sp-3);
    padding-bottom: var(--cds-sp-3);
  }

  .menu-item,
  .submenu-item {
    padding-top: var(--cds-sp-3);
    padding-bottom: var(--cds-sp-3);
  }

  /* Deshabilitar hover effects que no aplican en touch */
  .stat-card:hover,
  .dashboard-card:hover,
  .chart-container:hover,
  .quick-action-btn:hover,
  .referidor-card-enhanced:hover {
    transform: none !important;
    box-shadow: var(--cds-shadow-xs) !important;
  }
}

/* ----- 52.6 Fuentes mínimas para lectura ----- */
@media (max-width: 767.98px) {
  .menu-item,
  .submenu-item,
  .theme-option-name,
  .dropdown-item,
  .card-body,
  .table td,
  .table th {
    font-size: max(0.8125rem, 13px);
  }

  .stat-card .stat-number {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }

  .stat-card .stat-title {
    font-size: 0.8125rem;
  }
}

/* =========================================================
   53. SIDEBAR MOBILE MEJORADO (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 767.98px) {
  /* ----- 53.1 Sidebar full-height con overlay ----- */
  .sidebar {
    width: 82vw;
    max-width: 320px;
    min-width: 260px;
    transform: translateX(-105%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 1050;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                4px 0 24px rgba(0, 0, 0, 0.15);
  }

  /* ----- 53.2 Overlay más oscuro y difuminado ----- */
  .sidebar-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
  }

  /* ----- 53.3 Header del sidebar más compacto ----- */
  .sidebar-header {
    padding: var(--cds-sp-4) var(--cds-sp-3);
    min-height: 80px;
  }

  .sidebar-logo {
    height: 36px;
  }

  .sidebar-header h5 {
    font-size: 1rem !important;
  }

  /* ----- 53.4 Items del menú con más espacio táctil ----- */
  .sidebar-menu {
    padding: var(--cds-sp-2) 0;
  }

  .menu-item {
    padding: var(--cds-sp-4) var(--cds-sp-4);
    font-size: 0.9375rem;
    min-height: 48px;
    border-left-width: 4px;
  }

  .submenu-item {
    padding: var(--cds-sp-3) var(--cds-sp-4) var(--cds-sp-3) calc(var(--cds-sp-4) + 32px);
    min-height: 44px;
    font-size: 0.875rem;
  }

  .menu-item i,
  .submenu-item i {
    font-size: 1.125rem;
    width: 24px;
  }

  /* ----- 53.5 Footer del sidebar con safe area ----- */
  .sidebar-footer {
    padding-bottom: calc(var(--cds-sp-3) + env(safe-area-inset-bottom, 0px));
  }

  /* ----- 53.6 Eliminar hover states en mobile ----- */
  .menu-item:hover,
  .submenu-item:hover {
    background: transparent;
  }

  .menu-item:active {
    background: color-mix(in srgb, var(--cds-primary-fg) 15%, transparent);
  }

  /* ----- 53.7 Submenú flotante deshabilitado en mobile ----- */
  .sidebar.collapsed .menu-group:hover .submenu {
    display: none !important;
  }

  .sidebar.collapsed {
    width: 82vw;
    max-width: 320px;
  }

  .sidebar.collapsed .menu-text,
  .sidebar.collapsed .theme-label {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    display: inline !important;
  }

  .sidebar.collapsed .menu-item {
    justify-content: flex-start;
    padding: var(--cds-sp-4) var(--cds-sp-4);
  }

  .sidebar.collapsed .sidebar-logo {
    height: 36px;
  }

  .sidebar.collapsed .sidebar-header {
    padding: var(--cds-sp-4) var(--cds-sp-3);
  }

  /* ----- 53.8 Animación de entrada para submenús en mobile ----- */
  .submenu.collapse.show {
    animation: cds-submenu-expand 250ms ease-out;
  }

  @keyframes cds-submenu-expand {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* =========================================================
   54. TABLAS RESPONSIVE (v1.5 NUEVA)
   ========================================================= */

/* ----- 54.1 Tablas en móvil: modo tarjetas ----- */
@media (max-width: 575.98px) {
  .table-cards-mobile thead {
    display: none;
  }

  .table-cards-mobile tbody tr {
    display: block;
    margin-bottom: var(--cds-sp-3);
    border: 1px solid var(--cds-border);
    border-radius: var(--cds-r-md);
    padding: var(--cds-sp-3);
    background: var(--cds-surface);
    box-shadow: var(--cds-shadow-xs);
    position: relative;
  }

  .table-cards-mobile tbody tr:hover {
    background: var(--cds-surface);
    transform: none;
  }

  .table-cards-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cds-sp-2) 0;
    border: none;
    border-bottom: 1px solid var(--cds-border);
    font-size: 0.875rem;
  }

  .table-cards-mobile tbody td:last-child {
    border-bottom: none;
    padding-top: var(--cds-sp-3);
    justify-content: flex-end;
  }

  .table-cards-mobile tbody td::before {
    content: attr(data-label);
    font-weight: var(--cds-fw-semibold);
    color: var(--cds-fg-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: var(--cds-sp-2);
    flex-shrink: 0;
  }
}

/* ----- 54.2 Tabla responsive con scroll suave ----- */
@media (max-width: 991.98px) {
  .table-responsive {
    border-radius: var(--cds-r-md);
    border: 1px solid var(--cds-border);
    box-shadow: var(--cds-shadow-xs);
  }

  .table-responsive table {
    min-width: 640px;
  }

  .table-responsive .table {
    margin-bottom: 0;
  }

  /* Sticky first column en tablas anchas */
  .table-sticky-first th:first-child,
  .table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cds-surface);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }

  .table-sticky-first thead th:first-child {
    background: var(--cds-bg-alt);
    z-index: 3;
  }
}

/* ----- 54.3 Paginación responsive ----- */
@media (max-width: 575.98px) {
  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--cds-sp-1);
  }

  .page-item:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  .page-link {
    min-width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }
}

/* ----- 54.4 Acciones en tablas móvil ----- */
@media (max-width: 767.98px) {
  .action-buttons {
    flex-wrap: wrap;
    gap: var(--cds-sp-1);
  }

  .action-buttons .btn {
    padding: var(--cds-sp-1) var(--cds-sp-2);
    min-height: 32px;
    font-size: 0.75rem;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-sp-2);
    padding: var(--cds-sp-3);
  }

  .table-header .d-flex {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* =========================================================
   55. CHARTS RESPONSIVE (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 991.98px) {
  .chart-container [id$="Chart"],
  .chart-container [id$="chart"],
  .chart-container canvas {
    max-height: 260px !important;
  }

  #salesChart { height: 260px !important; }
  #distributionChart { height: 180px !important; }
  #conversionChart { height: 130px !important; }
  #regionalChart { height: 220px !important; }
  #customerTrendChart { height: 220px !important; }
}

@media (max-width: 575.98px) {
  .chart-container [id$="Chart"],
  .chart-container [id$="chart"],
  .chart-container canvas {
    max-height: 220px !important;
  }

  #salesChart { height: 220px !important; }
  #distributionChart { height: 160px !important; }
  #conversionChart { height: 120px !important; }
  #regionalChart { height: 200px !important; }
  #customerTrendChart { height: 200px !important; }

  .chart-header h5 {
    font-size: 1rem;
  }

  .chart-header .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Leyendas apiladas verticalmente */
  .chart-container .row.text-center {
    flex-wrap: wrap;
    gap: var(--cds-sp-2);
  }

  .chart-container .row.text-center > .col {
    flex: 0 0 auto;
    min-width: 80px;
  }

  .legend-dot {
    width: 6px;
    height: 6px;
  }
}

/* ----- 55.1 Conversión metric en móvil ----- */
@media (max-width: 575.98px) {
  .conversion-metric .h3 {
    font-size: 1.5rem;
  }

  .conversion-metric {
    padding: 0.75rem;
  }
}

/* =========================================================
   56. NAVBAR MOBILE (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 767.98px) {
  /* ----- 56.1 Navbar más compacto ----- */
  .top-navbar {
    padding: var(--cds-sp-2) var(--cds-sp-3);
    padding-top: calc(var(--cds-sp-2) + env(safe-area-inset-top, 0px));
    min-height: 56px;
  }

  .top-navbar .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

  /* ----- 56.2 Ocultar breadcrumb en móvil ----- */
  .top-navbar .breadcrumb {
    display: none !important;
  }

  /* ----- 56.3 Gap más pequeño entre acciones ----- */
  .top-navbar .gap-3 {
    gap: var(--cds-sp-2) !important;
  }

  /* ----- 56.4 Search dropdown full width en móvil ----- */
  .search-results-dropdown {
    width: calc(100vw - 24px) !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: auto !important;
    position: fixed !important;
    top: calc(var(--cds-navbar-h) + var(--cds-sp-2)) !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ----- 56.5 User dropdown info oculto en móvil ----- */
  .user-dropdown-info {
    display: none !important;
  }

  .user-dropdown-toggle .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
  }

  .user-dropdown-chevron {
    font-size: 0.625rem;
  }

  /* ----- 56.6 Acciones rápidas más compactas ----- */
  .action-circle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .action-circle-btn .fas {
    font-size: 0.875rem;
  }

  /* ----- 56.7 Sidebar toggle más visible ----- */
  .sidebar-toggle-mobile {
    font-size: 1.25rem;
    padding: var(--cds-sp-2);
  }

  /* ----- 56.8 Dropdown menus alineados ----- */
  .dropdown-menu {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  .top-navbar {
    padding: var(--cds-sp-2);
  }

  .user-dropdown-toggle {
    gap: 0.25rem;
    padding: 0.125rem;
  }

  .notification-circle-btn,
  .action-circle-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
}

/* =========================================================
   57. STAT CARDS RESPONSIVE (v1.5 NUEVA)
   ========================================================= */

/* ----- 57.1 Stat cards en tablet: padding reducido ----- */
@media (max-width: 991.98px) {
  .stat-card {
    padding: var(--cds-sp-3);
  }

  .stat-card .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .stat-card .stat-number {
    font-size: 1.75rem;
  }

  .metric-card-sm {
    padding: var(--cds-sp-3);
  }

  .metric-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .metric-value {
    font-size: 1.5rem;
  }
}

/* ----- 57.2 Stat cards en móvil: layout compacto ----- */
@media (max-width: 575.98px) {
  .stat-card {
    padding: var(--cds-sp-3);
    border-left-width: 3px;
  }

  .stat-content {
    gap: var(--cds-sp-2);
    margin-bottom: var(--cds-sp-2);
  }

  .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: var(--cds-r-sm);
  }

  .stat-card .stat-number {
    font-size: 1.375rem;
    line-height: 1.1;
  }

  .stat-card .stat-title {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .stat-trend {
    font-size: 0.6875rem;
  }

  .metric-card-sm {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--cds-sp-2);
    padding: var(--cds-sp-3);
  }

  .metric-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .metric-value {
    font-size: 1.25rem;
  }

  .metric-label {
    font-size: 0.75rem;
  }

  /* ----- 57.3 Métricas rápidas del activity feed ----- */
  .chart-container .row.g-3 > .col-6 .p-3 {
    padding: var(--cds-sp-2) !important;
  }

  .chart-container .row.g-3 > .col-6 .h5 {
    font-size: 1.125rem;
  }
}

/* ----- 57.4 Referidos en móvil ----- */
@media (max-width: 575.98px) {
  .referidor-card-enhanced {
    padding: var(--cds-sp-3);
    gap: var(--cds-sp-3);
    flex-wrap: wrap;
  }

  .referidor-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .referidor-details h6 {
    font-size: 0.875rem;
  }

  .referidor-progress-enhanced {
    min-width: 0;
    width: 100%;
  }

  .referidor-numbers {
    gap: var(--cds-sp-2);
  }

  .stat-number .number {
    font-size: 1.125rem;
  }

  .stat-number .label {
    font-size: 0.6875rem;
  }

  .level-badge {
    padding: var(--cds-sp-1) var(--cds-sp-2);
    font-size: 0.6875rem;
  }
}

/* =========================================================
   58. FORMS RESPONSIVE (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 767.98px) {
  /* ----- 58.1 Inputs full width ----- */
  .form-group,
  .cds-field,
  .cds-floating {
    margin-bottom: var(--cds-sp-3);
  }

  .form-control,
  .form-select,
  .cds-input,
  .cds-select,
  .cds-textarea {
    width: 100%;
  }

  /* ----- 58.2 Botones en formularios apilados ----- */
  .modal-footer,
  .cds-modal-footer {
    flex-direction: column;
    gap: var(--cds-sp-2);
  }

  .modal-footer .btn,
  .cds-modal-footer .cds-btn {
    width: 100%;
    justify-content: center;
  }

  /* ----- 58.3 Inputs con iconos ----- */
  .cds-input-icon .form-control {
    padding-left: 40px !important;
  }

  /* ----- 58.4 Floating labels ajustadas ----- */
  .cds-floating .form-control,
  .cds-floating .form-select {
    height: 52px;
    padding: 18px 12px 4px 12px;
  }

  .cds-floating label {
    left: 12px;
    font-size: 0.875rem;
  }

  .cds-floating .form-control:focus ~ label,
  .cds-floating .form-control:not(:placeholder-shown) ~ label,
  .cds-floating .form-select:focus ~ label,
  .cds-floating .form-select:not([value=""]):valid ~ label {
    font-size: 0.6875rem;
  }

  /* ----- 58.5 Checkboxes y radios más grandes ----- */
  .cds-check {
    padding: var(--cds-sp-3) var(--cds-sp-2);
    min-height: var(--cds-touch-target);
  }

  .cds-check input[type="checkbox"],
  .cds-check input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  .cds-check .cds-check-label {
    font-size: 0.9375rem;
  }

  /* ----- 58.6 File inputs ----- */
  .cds-file {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-sp-2);
    padding: var(--cds-sp-3);
  }

  .cds-file .cds-file-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* ----- 58.7 Input groups apilados si es necesario ----- */
  .input-group {
    flex-wrap: nowrap;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* ----- 58.8 Date/time inputs sin zoom iOS ----- */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: var(--cds-touch-target);
  }
}

@media (max-width: 480px) {
  /* ----- 58.9 Wizard de encuestas en móvil ----- */
  .step-indicator {
    gap: var(--cds-sp-2);
    margin-bottom: var(--cds-sp-4);
  }

  .step {
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
  }

  .header-card {
    padding: var(--cds-sp-4);
  }

  .form-section {
    margin-bottom: var(--cds-sp-3);
    border-radius: var(--cds-r-md);
  }

  .section-icon {
    width: 32px;
    height: 32px;
    margin-right: var(--cds-sp-2);
  }
}

/* =========================================================
   59. MODALES FULL-SCREEN EN MÓVIL (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 575.98px) {
  /* ----- 59.1 Modales ocupan toda la pantalla ----- */
  .modal.show {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-content,
  .cds-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    border-radius: var(--cds-r-lg) var(--cds-r-lg) 0 0 !important;
    margin: 0 !important;
    animation: cds-modal-sheet-up 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    flex-direction: column;
  }

  @keyframes cds-modal-sheet-up {
    from {
      transform: translateY(100%);
      opacity: 0.8;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    align-items: flex-end;
    display: flex;
  }

  /* ----- 59.2 Body del modal con scroll ----- */
  .modal-body,
  .cds-modal-body {
    max-height: calc(100vh - 180px) !important;
    max-height: calc(100dvh - 180px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: var(--cds-sp-4) !important;
  }

  .modal-header,
  .cds-modal-header {
    padding: var(--cds-sp-3) var(--cds-sp-4) !important;
    flex-shrink: 0;
    border-bottom: 1px solid var(--cds-border);
  }

  .modal-footer,
  .cds-modal-footer {
    padding: var(--cds-sp-3) var(--cds-sp-4) !important;
    padding-bottom: calc(var(--cds-sp-3) + env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0;
  }

  .modal-title {
    font-size: 1.0625rem;
  }

  /* ----- 59.3 Botón de cerrar más grande ----- */
  .modal .btn-close,
  .cds-modal-header .btn-close {
    width: 32px;
    height: 32px;
    padding: 8px;
    background-size: 16px;
  }

  /* ----- 59.4 Modal backdrop ----- */
  .modal-backdrop,
  .modal.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* =========================================================
   60. THEME DRAWER RESPONSIVE REFINADO (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 767.98px) {
  .cds-theme-drawer {
    width: 92vw !important;
    max-width: 400px;
    border-radius: var(--cds-r-lg) 0 0 var(--cds-r-lg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cds-theme-drawer-header {
    padding: var(--cds-sp-3) var(--cds-sp-4);
    padding-top: calc(var(--cds-sp-3) + env(safe-area-inset-top, 0px));
  }

  .cds-theme-drawer-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .cds-theme-drawer-title {
    font-size: 1rem;
  }

  .cds-theme-drawer-subtitle {
    font-size: 0.6875rem;
  }

  .cds-theme-drawer-body {
    padding: var(--cds-sp-2);
    gap: var(--cds-sp-1);
  }

  .cds-theme-option {
    padding: var(--cds-sp-2) var(--cds-sp-3);
    gap: var(--cds-sp-2);
    min-height: 48px;
  }

  .cds-theme-option-swatch {
    width: 28px;
    height: 28px;
  }

  .cds-theme-option-name {
    font-size: 0.875rem;
  }

  .cds-theme-option-id {
    font-size: 0.625rem;
  }

  .cds-theme-drawer-footer {
    padding: var(--cds-sp-2) var(--cds-sp-3);
    padding-bottom: calc(var(--cds-sp-2) + env(safe-area-inset-bottom, 0px));
  }

  .cds-theme-drawer-hint {
    font-size: 0.6875rem;
  }
}

@media (max-width: 400px) {
  .cds-theme-drawer {
    width: 100vw !important;
    border-radius: 0;
  }
}

/* =========================================================
   61. DASHBOARD CONTENT PADDING ADAPTATIVO (v1.5 NUEVA)
   ========================================================= */

/* Padding progresivo según viewport */
.dashboard-content {
  padding: clamp(var(--cds-sp-3), 3vw, var(--cds-sp-6));
}

/* Ajuste específico por breakpoint */
@media (min-width: 1400px) {
  .dashboard-content { padding: var(--cds-sp-8) var(--cds-sp-6); }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .dashboard-content { padding: var(--cds-sp-6); }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .dashboard-content { padding: var(--cds-sp-5); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .dashboard-content { padding: var(--cds-sp-4); }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .dashboard-content { padding: var(--cds-sp-3); }
}

@media (max-width: 575.98px) {
  .dashboard-content {
    padding: var(--cds-sp-2);
    padding-left: calc(var(--cds-sp-2) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--cds-sp-2) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--cds-sp-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   62. ANIMACIONES REDUCIDAS EN MÓVIL (v1.5 NUEVA)
   ========================================================= */

@media (max-width: 767.98px) {
  /* Deshabilitar animaciones costosas para rendimiento */
  .cds-animate-in,
  .cds-animate-in-d1,
  .cds-animate-in-d2,
  .cds-animate-in-d3,
  .cds-animate-in-d4,
  .cds-animate-in-d5 {
    animation-duration: 200ms !important;
    animation-delay: 0ms !important;
  }

  .welcome-header::before {
    opacity: 0.15;
  }

  .welcome-header:hover::before {
    opacity: 0.2;
  }

  /* Reducir blur en mobile por rendimiento */
  .sidebar-overlay,
  .modal-backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Eliminar transformaciones complejas */
  .stat-card:hover .stat-icon,
  .dashboard-card:hover .title-icon,
  .quick-action-btn:hover .action-icon,
  .referidor-card-enhanced:hover .referidor-avatar {
    transform: none;
  }

  /* Simplificar transiciones */
  .btn:hover,
  .cds-btn:hover {
    transform: none;
  }
}

/* Prefers reduced motion siempre gana */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .main-content,
  .submenu,
  .modal-content,
  .cds-modal,
  .cds-theme-drawer,
  .cds-theme-drawer-backdrop,
  .cds-toast,
  .alert,
  .dropdown-menu.show {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   63. ORIENTACIÓN LANDSCAPE/PORTRAIT (v1.5 NUEVA)
   ========================================================= */

/* ----- 63.1 Móvil horizontal (landscape) ----- */
@media (max-width: 991.98px) and (orientation: landscape) {
  .sidebar {
    width: 280px;
    max-width: 280px;
  }

  .sidebar-header {
    padding: var(--cds-sp-2) var(--cds-sp-3);
    min-height: 60px;
  }

  .sidebar-logo {
    height: 28px;
  }

  .sidebar-header h5 {
    display: none;
  }

  .menu-item {
    padding: var(--cds-sp-2) var(--cds-sp-3);
    min-height: 40px;
  }

  .submenu-item {
    padding: var(--cds-sp-2) var(--cds-sp-3) var(--cds-sp-2) calc(var(--cds-sp-3) + 28px);
    min-height: 38px;
  }

  .sidebar-menu {
    overflow-y: auto;
  }

  .sidebar-footer {
    padding: var(--cds-sp-1) var(--cds-sp-3);
  }

  .sidebar-version {
    display: none;
  }

  /* Modales en landscape ocupan menos altura */
  .modal-content,
  .cds-modal {
    max-height: 95vh !important;
    max-height: 95dvh !important;
  }

  .modal-body,
  .cds-modal-body {
    max-height: calc(95vh - 140px) !important;
    max-height: calc(95dvh - 140px) !important;
  }

  /* Dashboard content más compacto */
  .dashboard-content {
    padding: var(--cds-sp-2) var(--cds-sp-3);
  }

  /* Welcome header horizontal */
  .welcome-header {
    flex-direction: row;
    padding: var(--cds-sp-3);
  }

  .welcome-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* ----- 63.2 Tablet vertical optimizado ----- */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  .dashboard-content {
    padding: var(--cds-sp-4);
  }

  .stat-card {
    min-height: 140px;
  }

  .chart-container {
    min-height: 320px;
  }
}

/* ----- 63.3 Móvil vertical con notch ----- */
@media (max-width: 767.98px) and (orientation: portrait) {
  .sidebar {
    padding-top: max(env(safe-area-inset-top, 0px), var(--cds-sp-2));
  }

  .top-navbar {
    padding-top: max(env(safe-area-inset-top, 0px), var(--cds-sp-2));
  }
}

/* =========================================================
   64. PRINT MEJORADO (v1.5 NUEVA)
   ========================================================= */

@media print {
  /* Ocultar elementos no imprimibles */
  .sidebar,
  .top-navbar,
  .sidebar-overlay,
  .sidebar-toggle-mobile,
  .btn,
  .cds-btn,
  .btn-primary-custom,
  .dropdown-toggle,
  .theme-selector-wrapper,
  #cds-theme-drawer-root,
  .pagination,
  .action-buttons,
  .quick-action-btn {
    display: none !important;
  }

  /* Layout de impresión */
  .dashboard-container {
    display: block !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .dashboard-content {
    padding: 0 !important;
    background: white !important;
  }

  /* Colores para impresión */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6 {
    color: black !important;
    page-break-after: avoid;
  }

  a {
    color: black !important;
    text-decoration: underline !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* Cards para impresión */
  .card,
  .chart-container,
  .stat-card,
  .dashboard-card,
  .cds-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Tablas para impresión */
  table {
    page-break-inside: auto;
    border-collapse: collapse;
    width: 100%;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-header-group;
  }

  th, td {
    border: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
    color: black !important;
  }

  /* Imágenes */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Badges en impresión */
  .badge,
  .cds-badge {
    border: 1px solid #999 !important;
    background: transparent !important;
    color: black !important;
  }

  /* Grid de impresión */
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .col-xl-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-xl-4 { flex: 0 0 33.33% !important; max-width: 33.33% !important; }
  .col-xl-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-xl-8 { flex: 0 0 66.66% !important; max-width: 66.66% !important; }

  .no-print { display: none !important; }
  .print-only { display: block !important; }

  /* Saltos de página */
  .page-break { page-break-before: always; }
  .no-break { page-break-inside: avoid; }
}

/* =========================================================
   65. UTILIDADES RESPONSIVE ADICIONALES (v1.5 NUEVA)
   ========================================================= */

/* ----- 65.1 Visibilidad condicional ----- */
.visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xl {
  display: none !important;
}

@media (max-width: 575.98px) {
  .visible-xs { display: block !important; }
  .visible-xs.inline { display: inline !important; }
  .visible-xs.flex { display: flex !important; }
  .visible-xs.grid { display: grid !important; }
  .hidden-xs { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .visible-sm { display: block !important; }
  .visible-sm.inline { display: inline !important; }
  .visible-sm.flex { display: flex !important; }
  .visible-sm.grid { display: grid !important; }
  .hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .visible-md { display: block !important; }
  .visible-md.inline { display: inline !important; }
  .visible-md.flex { display: flex !important; }
  .visible-md.grid { display: grid !important; }
  .hidden-md { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .visible-lg { display: block !important; }
  .visible-lg.inline { display: inline !important; }
  .visible-lg.flex { display: flex !important; }
  .visible-lg.grid { display: grid !important; }
  .hidden-lg { display: none !important; }
}

@media (min-width: 1200px) {
  .visible-xl { display: block !important; }
  .visible-xl.inline { display: inline !important; }
  .visible-xl.flex { display: flex !important; }
  .visible-xl.grid { display: grid !important; }
  .hidden-xl { display: none !important; }
}

/* ----- 65.2 Texto responsive ----- */
@media (max-width: 575.98px) {
  .text-xs-center { text-align: center !important; }
  .text-xs-left { text-align: left !important; }
  .text-xs-right { text-align: right !important; }
  .text-xs-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text-xs-wrap { white-space: normal !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .text-sm-center { text-align: center !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
}

/* ----- 65.3 Espaciado responsive ----- */
@media (max-width: 575.98px) {
  .p-xs-0 { padding: 0 !important; }
  .p-xs-1 { padding: var(--cds-sp-1) !important; }
  .p-xs-2 { padding: var(--cds-sp-2) !important; }
  .p-xs-3 { padding: var(--cds-sp-3) !important; }
  .px-xs-2 { padding-left: var(--cds-sp-2) !important; padding-right: var(--cds-sp-2) !important; }
  .py-xs-2 { padding-top: var(--cds-sp-2) !important; padding-bottom: var(--cds-sp-2) !important; }
  .m-xs-0 { margin: 0 !important; }
  .mt-xs-2 { margin-top: var(--cds-sp-2) !important; }
  .mb-xs-2 { margin-bottom: var(--cds-sp-2) !important; }
  .mb-xs-3 { margin-bottom: var(--cds-sp-3) !important; }
  .gap-xs-2 { gap: var(--cds-sp-2) !important; }
  .gap-xs-3 { gap: var(--cds-sp-3) !important; }
}

/* ----- 65.4 Flex responsive ----- */
@media (max-width: 575.98px) {
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-wrap { flex-wrap: wrap !important; }
  .flex-xs-nowrap { flex-wrap: nowrap !important; }
  .align-xs-start { align-items: flex-start !important; }
  .align-xs-center { align-items: center !important; }
  .justify-xs-between { justify-content: space-between !important; }
  .justify-xs-center { justify-content: center !important; }
  .w-xs-100 { width: 100% !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-wrap { flex-wrap: wrap !important; }
  .w-sm-100 { width: 100% !important; }
}

/* ----- 65.5 Container queries fallback ----- */
@supports not (container-type: inline-size) {
  .stat-card { min-height: auto; }
}

/* =========================================================
   66. FIXES FINALES DE RESPONSIVE CRÍTICO
   ========================================================= */

/* ----- 66.1 Evitar overflow horizontal global ----- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-container,
.main-content,
.dashboard-content,
.row {
  max-width: 100%;
}

/* ----- 66.2 Fix para imágenes que rompen layout ----- */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ----- 66.3 Fix para código y texto largo ----- */
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ----- 66.4 Fix para URLs largas ----- */
a, p, span, div, td {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ----- 66.5 Mejora de legibilidad del texto muted en móvil ----- */
@media (max-width: 575.98px) {
  .text-muted {
    color: color-mix(in srgb, var(--cds-fg-muted) 95%, var(--cds-fg)) !important;
  }
}

/* ----- 66.6 Card header responsive ----- */
@media (max-width: 575.98px) {
  .chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cds-sp-2);
  }

  .chart-header > div:first-child {
    width: 100%;
  }

  .chart-header .d-flex {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--cds-sp-2);
  }

  .chart-header .dropdown {
    flex: 1 1 auto;
  }

  .chart-header .dropdown .btn {
    width: 100%;
  }
}

/* ----- 66.7 Botones en toolbar responsive ----- */
@media (max-width: 575.98px) {
  .d-flex.gap-2 > .btn:not(.btn-icon-only),
  .d-flex.gap-2 > .cds-btn:not(.cds-btn-icon) {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }

  .d-flex.gap-2 > .btn-icon-only,
  .d-flex.gap-2 > .btn i:only-child {
    flex: 0 0 auto;
  }
}

/* ----- 66.8 Scroll shadow para indicar contenido ----- */
.table-responsive,
.cds-table-wrap {
  position: relative;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--cds-border-strong);
  border-radius: var(--cds-r-full);
}

/* ----- 66.9 Fix para inputs de archivo en iOS ----- */
input[type="file"] {
  max-width: 100%;
}

/* ----- 66.10 Fix dropdowns en bordes de pantalla ----- */
@media (max-width: 575.98px) {
  .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
  }

  .dropdown-menu {
    position: absolute;
    z-index: 1050;
  }
}

/* =========================================================
   67. BOTONES UNIFICADOS — FIX APILADO Y ESTADOS (v1.5)
   ========================================================= */

/* Fix del apilado de botones en footers de modales y formularios */
.cds-modal-footer .cds-btn,
.modal-footer .btn,
.form-actions .cds-btn,
.form-actions .btn {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .cds-modal-footer .cds-btn,
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}

/* Botones icon-only con aria-label visible en tooltip */
.cds-btn-icon[aria-label]:hover::after,
.btn[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cds-fg);
  color: var(--cds-fg-inverse);
  font-size: var(--cds-fs-2xs);
  font-weight: var(--cds-fw-medium);
  padding: 4px 8px;
  border-radius: var(--cds-r-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--cds-z-tooltip);
  opacity: 0;
  animation: cds-fade-in .15s ease-out forwards;
}

/* Botón con icono + texto: alineación consistente */
.cds-btn i,
.btn i {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Botón con spinner interno */
.cds-btn .spinner-border,
.btn .spinner-border {
  width: 1em;
  height: 1em;
  border-width: 2px;
  vertical-align: -0.125em;
}

/* Estado focus en botones outline */
.cds-btn-outline:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-warning:focus-visible,
.btn-outline-danger:focus-visible,
.btn-outline-info:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-primary) 30%, transparent);
}

/* Botones en dark mode: asegurar contraste del texto */
[data-theme="oscuro"] .cds-btn-outline,
[data-theme="corporativo-oscuro"] .cds-btn-outline {
  --btn-fg: var(--cds-primary);
}

[data-theme="oscuro"] .cds-btn-ghost,
[data-theme="corporativo-oscuro"] .cds-btn-ghost {
  --btn-fg: var(--cds-fg-muted);
}

/* =========================================================
   68. TABLAS CDS — STICKY HEADERS, CARDS MÓVIL, ACCIONES
   ========================================================= */

/* Sticky header opcional en tablas largas */
.cds-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--cds-border);
}

/* Tabla con acciones consistentes */
.cds-table .action-buttons {
  display: inline-flex;
  gap: var(--cds-sp-1);
}

.cds-table .action-buttons .btn,
.cds-table .action-buttons .cds-btn {
  min-height: 30px;
  padding: var(--cds-sp-1) var(--cds-sp-2);
  font-size: var(--cds-fs-xs);
}

/* Tablas con avatar */
.cds-table .user-cell {
  display: flex;
  align-items: center;
  gap: var(--cds-sp-2);
  min-width: 0;
}

.cds-table .user-cell .user-name {
  font-weight: var(--cds-fw-semibold);
  color: var(--cds-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cds-table .user-cell .user-meta {
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
}

/* Estados en tablas con badge consistente */
.cds-table .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-sp-1);
  padding: 2px var(--cds-sp-2);
  border-radius: var(--cds-r-full);
  font-size: var(--cds-fs-2xs);
  font-weight: var(--cds-fw-semibold);
}

/* Modo cards móvil — añadido a table-responsive */
@media (max-width: 575.98px) {
  .cds-table-cards-mobile thead {
    display: none;
  }

  .cds-table-cards-mobile tbody tr {
    display: block;
    margin-bottom: var(--cds-sp-3);
    padding: var(--cds-sp-3);
    border: 1px solid var(--cds-border);
    border-radius: var(--cds-r-md);
    background: var(--cds-surface);
    box-shadow: var(--cds-shadow-xs);
  }

  .cds-table-cards-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cds-sp-2);
    padding: var(--cds-sp-2) 0;
    border: none;
    border-bottom: 1px solid var(--cds-border);
    font-size: 0.875rem;
  }

  .cds-table-cards-mobile tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
  }

  .cds-table-cards-mobile tbody td::before {
    content: attr(data-label);
    font-weight: var(--cds-fw-semibold);
    color: var(--cds-fg-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
}

/* =========================================================
   69. FORMULARIOS CDS — FLOATING LABELS, FILE INPUTS, VALIDACIÓN
   ========================================================= */

/* Validación visual uniforme */
.cds-input.is-valid,
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--cds-success);
}

.cds-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--cds-danger);
}

.cds-input.is-valid:focus,
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-success) 20%, transparent);
}

.cds-input.is-invalid:focus,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cds-danger) 20%, transparent);
}

/* Icono de validación (opcional) */
.cds-input-wrap {
  position: relative;
}

.cds-input-wrap .cds-input-feedback {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--cds-fs-sm);
  pointer-events: none;
}

.cds-input-wrap .cds-input-feedback.is-valid {
  color: var(--cds-success);
}

.cds-input-wrap .cds-input-feedback.is-invalid {
  color: var(--cds-danger);
}

/* File input mejorado */
.form-control[type="file"] {
  padding: var(--cds-sp-2);
  cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
  margin-right: var(--cds-sp-3);
  padding: var(--cds-sp-1) var(--cds-sp-3);
  border: 1px solid var(--cds-border-strong);
  border-radius: var(--cds-r-sm);
  background: var(--cds-bg-alt);
  color: var(--cds-fg);
  font-size: var(--cds-fs-sm);
  font-weight: var(--cds-fw-medium);
  cursor: pointer;
  transition: all var(--cds-t-fast);
}

.form-control[type="file"]::file-selector-button:hover {
  background: var(--cds-primary);
  color: var(--cds-primary-fg);
  border-color: var(--cds-primary);
}

/* Datalist / Comboboxes */
.form-control[list] {
  background-image: var(--cds-select-arrow-light);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
  padding-right: 2rem;
}

/* Input de búsqueda con icono */
.cds-search {
  position: relative;
}

.cds-search .form-control {
  padding-left: 36px;
}

.cds-search .cds-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cds-fg-muted);
  pointer-events: none;
  font-size: var(--cds-fs-sm);
}

/* Comboboxes Livewire con wire:model.live */
select.form-select[wire\:model],
select.form-control[wire\:model] {
  cursor: pointer;
}

/* =========================================================
   70. NAVBAR/SIDEBAR DEL DASHBOARD — CONSISTENCIA TOTAL
   ========================================================= */

/* Breadcrumb del navbar */
.top-navbar .breadcrumb {
  font-size: var(--cds-fs-xs);
  margin: 0;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
}

/* Search input en navbar */
.top-navbar .search-results-dropdown {
  min-width: 320px;
  max-width: 420px;
  padding: var(--cds-sp-3);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-r-md);
  box-shadow: var(--cds-shadow-lg);
  background: var(--cds-surface);
}

.top-navbar .search-results-dropdown .form-control {
  font-size: var(--cds-fs-sm);
}

/* Notificaciones y acciones en navbar */
.top-navbar .notification-dropdown {
  position: relative;
}

.top-navbar .notification-list {
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.top-navbar .notification-item {
  transition: background var(--cds-t-fast), border-color var(--cds-t-fast);
  border-left: 3px solid transparent;
  cursor: pointer;
  padding: var(--cds-sp-3);
}

.top-navbar .notification-item.unread {
  background: color-mix(in srgb, var(--cds-primary) 5%, transparent);
  border-left-color: var(--cds-primary);
}

.top-navbar .notification-item:hover {
  background: var(--cds-bg-alt);
  text-decoration: none;
}

/* Toggle del sidebar */
.sidebar-toggle,
#sidebarToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cds-touch-target);
  height: var(--cds-touch-target);
  border-radius: var(--cds-r-md);
  background: transparent;
  border: 1px solid var(--cds-border);
  color: var(--cds-fg);
  transition: all var(--cds-t-fast);
}

.sidebar-toggle:hover,
#sidebarToggle:hover {
  background: var(--cds-bg-alt);
  border-color: var(--cds-primary);
  color: var(--cds-primary);
}

/* =========================================================
   71. CHART CONTAINERS — WRAPPERS ESTABLES Y ALTURA RESPONSIVE
   ========================================================= */

/* Wrapper interno con aspect ratio controlado */
.chart-container .chart-body {
  position: relative;
  width: 100%;
  height: 300px;
  min-height: 200px;
}

.chart-container .chart-body canvas {
  max-width: 100%;
  display: block;
}

@media (max-width: 991.98px) {
  .chart-container .chart-body {
    height: 260px;
  }
}

@media (max-width: 575.98px) {
  .chart-container .chart-body {
    height: 220px;
    padding: 0;
  }
}

/* Cuando se usa height:auto con Canvas, evitar el "aspect ratio jump" */
.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Leyenda del chart reflow */
.chart-container .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-sp-2);
  font-size: var(--cds-fs-sm);
}

@media (max-width: 575.98px) {
  .chart-container .chart-legend {
    flex-direction: column;
    gap: var(--cds-sp-1);
  }
}

/* Mensaje "sin datos" en chart container */
.chart-container .chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--cds-fg-muted);
  text-align: center;
  padding: var(--cds-sp-4);
}

/* =========================================================
   72. STAT CARDS DASHBOARD — FORMATO UNIFICADO
   ========================================================= */

/* Icon-bg-color helper */
.stat-icon.bg-soft-primary { background: var(--cds-primary-soft); color: var(--cds-primary-soft-fg); }
.stat-icon.bg-soft-success { background: var(--cds-success-soft); color: var(--cds-success-fg); }
.stat-icon.bg-soft-warning { background: var(--cds-warning-soft); color: var(--cds-warning-fg); }
.stat-icon.bg-soft-danger  { background: var(--cds-danger-soft);  color: var(--cds-danger-fg); }
.stat-icon.bg-soft-info    { background: var(--cds-info-soft);    color: var(--cds-info-fg); }

/* Bordes consistentes */
.stat-card.border-primary { border-left: 4px solid var(--cds-primary); }
.stat-card.border-success { border-left: 4px solid var(--cds-success); }
.stat-card.border-warning { border-left: 4px solid var(--cds-warning); }
.stat-card.border-danger  { border-left: 4px solid var(--cds-danger); }
.stat-card.border-info    { border-left: 4px solid var(--cds-info); }

/* Grid consistente para stat cards principales */
.row.g-4 > .col-xl-3 > .stat-card {
  min-height: 150px;
}

@media (max-width: 575.98px) {
  .row.g-4 > .col-xl-3 > .stat-card {
    min-height: 130px;
  }
}

/* =========================================================
   73. MODALES CDS — BEHAVIOR UNIFICADO
   ========================================================= */

/* Modal con wizard multi-step */
.cds-modal-wizard .cds-modal-header {
  background: var(--cds-gradient-brand);
  color: var(--cds-primary-fg);
}

.cds-modal-wizard .cds-modal-header h3 {
  color: var(--cds-primary-fg);
}

.cds-modal-wizard .cds-modal-header .btn-close {
  filter: invert(1);
  opacity: 0.9;
}

/* Modal con scroll interno */
.cds-modal-scroll .cds-modal-body,
.cds-modal-scroll .modal-body {
  max-height: calc(100vh - 240px);
  max-height: calc(100dvh - 240px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modal con sidebar lateral (settings) */
.cds-modal-split {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  max-width: 900px !important;
}

.cds-modal-split .cds-modal-sidebar {
  padding: var(--cds-sp-4);
  border-right: 1px solid var(--cds-border);
  background: var(--cds-bg-alt);
}

@media (max-width: 767.98px) {
  .cds-modal-split {
    grid-template-columns: 1fr;
  }

  .cds-modal-split .cds-modal-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--cds-border);
  }
}

/* Modal full-screen desktop (opcional) */
@media (min-width: 1200px) {
  .cds-modal-fullscreen {
    max-width: 95vw !important;
    max-height: 90vh !important;
  }
}

/* =========================================================
   74. ALERTS/TOASTS UNIFICADOS
   ========================================================= */

/* Alertas inline con dismiss */
.cds-alert .cds-alert-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--cds-r-sm);
  transition: opacity var(--cds-t-fast), transform var(--cds-t-fast);
}

.cds-alert .cds-alert-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Alerta con acciones */
.cds-alert .cds-alert-actions {
  margin-top: var(--cds-sp-2);
  display: flex;
  gap: var(--cds-sp-2);
  flex-wrap: wrap;
}

/* Toasts apilados correctamente */
.cds-toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cds-sp-2);
}

/* Toast con progreso */
.cds-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.3;
  animation: cds-toast-progress 4s linear forwards;
}

@keyframes cds-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* =========================================================
   75. LIVEWIRE LOADING STATES Y WRAPPERS
   ========================================================= */

/* Wrapper de wire:ignore (charts, mapas, vis-network) */
[wire\:ignore] {
  position: relative;
}

[wire\:ignore][data-loading]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cds-surface) 80%, transparent);
  border-radius: var(--cds-r-md);
  z-index: 5;
  animation: cds-fade-in .2s ease-out;
}

/* Spinner nativo de Livewire */
[wire\:loading] .livewire-loading-spinner,
.livewire-loading-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cds-spin .75s linear infinite;
  vertical-align: -0.125em;
}

/* Botón con wire:target y spinner explícito */
.btn [wire\:loading] .spinner-border,
.cds-btn [wire\:loading] .spinner-border {
  width: 0.9em;
  height: 0.9em;
  border-width: 2px;
}

/* Tabla con wire:loading overlay */
.table-container {
  position: relative;
}

.table-container > [wire\:loading] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cds-surface) 85%, transparent);
  border-radius: var(--cds-r-lg);
  z-index: 5;
  pointer-events: none;
}

/* Dropdown con wire:loading */
.dropdown-menu [wire\:loading] {
  pointer-events: none;
}

/* Paginación con wire:loading */
.pagination [wire\:loading] {
  opacity: 0.4;
}

/* =========================================================
   76. FIX RESPONSIVE ESPECÍFICO DE LA VISTA DE PERMISOS (v1.5.1)
   ---------------------------------------------------------
   Motivo: en permission-management.blade.php la tabla de
   permisos y los filtros no se reacomodaban bien en móvil.
   Los síntomas eran:
     - Los `<select>` del row de filtros (col-md-3 + col-md-1)
       se salían del viewport y quedaban inutilizables.
     - El icono del permiso (40x40) empujaba el nombre fuera
       de la celda y se cortaba con `overflow: hidden`.
     - Los badges de roles/usuarios se desbordaban a la derecha.
     - El avatar 40x40 + texto al lado rompía el layout en xs.
   Solución:
     - `.cds-permission-filters`: row de filtros con wrap,
       selects full-width en xs/sm, gap consistente.
     - `.cds-permission-table`: tabla con degradación a cards
       en xs, sticky first column en sm, acciones envueltas.
     - `.cds-avatar-cell`: layout flex que no rompe en xs.
     - `.cds-badge-count`: badge compacto que no se desborda.
   ========================================================= */

/* ----- 76.1 Filtros de la vista de permisos ----- */
.cds-permission-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-sp-3);
  align-items: flex-end;
  width: 100%;
}

.cds-permission-filters > .form-group,
.cds-permission-filters > .cds-field,
.cds-permission-filters > [class*="col-"] {
  min-width: 0;
  flex: 1 1 200px;
  margin-bottom: 0;
}

.cds-permission-filters .input-group {
  width: 100%;
  flex-wrap: nowrap;
}

.cds-permission-filters .form-control,
.cds-permission-filters .form-select {
  min-width: 0;
  width: 100%;
}

/* Botón "limpiar filtros" compacto */
.cds-permission-filters .cds-btn-icon,
.cds-permission-filters .btn-icon {
  flex: 0 0 auto;
}

/* En xs: filtros en columna, todos full width */
@media (max-width: 575.98px) {
  .cds-permission-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cds-sp-2);
  }

  .cds-permission-filters > .form-group,
  .cds-permission-filters > .cds-field,
  .cds-permission-filters > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
  }

  .cds-permission-filters .cds-btn-icon,
  .cds-permission-filters .btn-icon {
    width: 100%;
    height: var(--cds-touch-target);
  }

  /* Botón "limpiar filtros" con texto visible en xs */
  .cds-permission-filters .btn-icon::after {
    content: 'Limpiar filtros';
    margin-left: var(--cds-sp-2);
  }
}

/* En sm/md: 2 columnas */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cds-permission-filters > .form-group,
  .cds-permission-filters > .cds-field,
  .cds-permission-filters > [class*="col-"] {
    flex: 1 1 calc(50% - var(--cds-sp-3));
  }
}

/* ----- 76.2 Tabla de permisos ----- */
.cds-permission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cds-fs-sm);
  table-layout: auto;
}

.cds-permission-table thead th {
  text-align: left;
  padding: var(--cds-sp-3) var(--cds-sp-4);
  background: var(--cds-bg-alt);
  color: var(--cds-fg-muted);
  font-size: var(--cds-fs-2xs);
  font-weight: var(--cds-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--cds-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cds-permission-table tbody td {
  padding: var(--cds-sp-3) var(--cds-sp-4);
  border-bottom: 1px solid var(--cds-border);
  color: var(--cds-fg);
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
}

.cds-permission-table tbody tr:last-child td {
  border-bottom: none;
}

.cds-permission-table tbody tr:hover td {
  background: var(--cds-bg-alt);
}

/* Nombre del permiso (columna principal) */
.cds-permission-table .permission-name-cell {
  display: flex;
  align-items: center;
  gap: var(--cds-sp-3);
  min-width: 0;
}

.cds-permission-table .permission-name-cell .permission-name {
  font-family: var(--cds-font-mono);
  font-size: var(--cds-fs-xs);
  font-weight: var(--cds-fw-semibold);
  color: var(--cds-fg);
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.cds-permission-table .permission-name-cell .permission-guard {
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  white-space: nowrap;
}

/* Columna de descripción: truncar con wrap */
.cds-permission-table .permission-description {
  font-size: var(--cds-fs-sm);
  color: var(--cds-fg);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Columna de módulo/grupo */
.cds-permission-table .permission-module {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cds-permission-table .permission-module .module-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-sp-1);
  padding: 2px var(--cds-sp-2);
  border-radius: var(--cds-r-full);
  font-size: var(--cds-fs-2xs);
  font-weight: var(--cds-fw-semibold);
  background: var(--cds-info-soft);
  color: var(--cds-info-fg);
  white-space: nowrap;
}

.cds-permission-table .permission-module .group-text {
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  word-break: break-word;
}

/* Columna de acciones */
.cds-permission-table .permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cds-sp-1);
  flex-wrap: wrap;
}

.cds-permission-table .permission-actions .btn,
.cds-permission-table .permission-actions .cds-btn {
  min-height: 30px;
  padding: var(--cds-sp-1) var(--cds-sp-2);
  font-size: var(--cds-fs-xs);
}

/* ----- 76.3 Badges de conteo en la tabla ----- */
.cds-badge-count {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-sp-1);
  padding: 2px var(--cds-sp-2);
  border-radius: var(--cds-r-full);
  font-size: var(--cds-fs-2xs);
  font-weight: var(--cds-fw-semibold);
  background: var(--cds-bg-alt);
  color: var(--cds-fg-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cds-badge-count.bg-roles {
  background: var(--cds-info-soft);
  color: var(--cds-info-fg);
}

.cds-badge-count.bg-users {
  background: var(--cds-primary-soft);
  color: var(--cds-primary-soft-fg);
}

/* ----- 76.4 Avatar cell (40x40 + texto al lado) ----- */
.cds-avatar-cell {
  display: flex;
  align-items: center;
  gap: var(--cds-sp-3);
  min-width: 0;
}

.cds-avatar-cell .cds-avatar-cell-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--cds-fs-md);
  color: var(--cds-primary-fg);
  background: var(--cds-gradient-brand);
}

.cds-avatar-cell .cds-avatar-cell-icon.bg-warning {
  background: var(--cds-warning);
  color: #fff;
}

.cds-avatar-cell .cds-avatar-cell-body {
  min-width: 0;
  flex: 1;
}

.cds-avatar-cell .cds-avatar-cell-title {
  font-weight: var(--cds-fw-semibold);
  color: var(--cds-fg);
  font-size: var(--cds-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cds-avatar-cell .cds-avatar-cell-subtitle {
  font-size: var(--cds-fs-2xs);
  color: var(--cds-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- 76.5 Degradación a cards en xs ----- */
@media (max-width: 575.98px) {
  .cds-permission-table {
    display: block;
    width: 100%;
    font-size: var(--cds-fs-sm);
  }

  .cds-permission-table thead {
    display: none;
  }

  .cds-permission-table tbody {
    display: block;
    width: 100%;
  }

  .cds-permission-table tbody tr {
    display: block;
    width: 100%;
    margin-bottom: var(--cds-sp-3);
    padding: var(--cds-sp-3);
    background: var(--cds-surface);
    border: 1px solid var(--cds-border);
    border-radius: var(--cds-r-md);
    box-shadow: var(--cds-shadow-xs);
  }

  .cds-permission-table tbody tr:hover td {
    background: transparent;
  }

  .cds-permission-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cds-sp-3);
    padding: var(--cds-sp-2) 0;
    border: none;
    border-bottom: 1px dashed var(--cds-border);
    font-size: var(--cds-fs-sm);
    width: 100%;
  }

  .cds-permission-table tbody td:last-child {
    border-bottom: none;
    justify-content: flex-end;
    padding-top: var(--cds-sp-3);
  }

  .cds-permission-table tbody td::before {
    content: attr(data-label);
    font-weight: var(--cds-fw-semibold);
    color: var(--cds-fg-muted);
    font-size: var(--cds-fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 80px;
  }

  /* En móvil los avatares/iconos se achican */
  .cds-permission-table .permission-name-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-sp-1);
  }

  .cds-permission-table .permission-name-cell .permission-name {
    font-size: var(--cds-fs-xs);
    word-break: break-all;
  }

  .cds-permission-table .permission-description {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    font-size: var(--cds-fs-sm);
  }

  .cds-permission-table .cds-avatar-cell-icon {
    width: 32px;
    height: 32px;
    font-size: var(--cds-fs-sm);
  }

  .cds-permission-table .permission-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .cds-permission-table .permission-actions .btn,
  .cds-permission-table .permission-actions .cds-btn {
    min-width: var(--cds-touch-target);
    min-height: var(--cds-touch-target);
  }
}

/* ----- 76.6 En sm (576-991): sticky first col + scroll horizontal ----- */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cds-permission-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--cds-r-md);
    border: 1px solid var(--cds-border);
    background: var(--cds-surface);
    box-shadow: var(--cds-shadow-xs);
  }

  .cds-permission-table {
    min-width: 720px;
  }

  .cds-permission-table th:first-child,
  .cds-permission-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cds-surface);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  }

  .cds-permission-table thead th:first-child {
    background: var(--cds-bg-alt);
    z-index: 3;
  }

  /* Aviso de scroll horizontal */
  .cds-permission-table-wrapper::after {
    content: 'Desliza →';
    display: block;
    text-align: center;
    font-size: var(--cds-fs-2xs);
    color: var(--cds-fg-subtle);
    padding: var(--cds-sp-1) 0;
    opacity: 0.7;
  }
}

/* ----- 76.7 Header de la vista de permisos ----- */
.cds-permission-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-sp-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--cds-sp-4);
}

.cds-permission-header .header-title-group {
  flex: 1 1 260px;
  min-width: 0;
}

.cds-permission-header .header-title {
  font-size: var(--cds-fs-2xl);
  font-weight: var(--cds-fw-bold);
  color: var(--cds-fg);
  margin-bottom: var(--cds-sp-1);
  display: flex;
  align-items: center;
  gap: var(--cds-sp-2);
  flex-wrap: wrap;
}

.cds-permission-header .header-title i {
  color: var(--cds-primary);
}

.cds-permission-header .header-subtitle {
  font-size: var(--cds-fs-sm);
  color: var(--cds-fg-muted);
  margin: 0;
}

.cds-permission-header .header-actions {
  display: flex;
  gap: var(--cds-sp-2);
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .cds-permission-header {
    flex-direction: column;
    align-items: stretch;
  }

  .cds-permission-header .header-title {
    font-size: var(--cds-fs-xl);
  }

  .cds-permission-header .header-actions {
    width: 100%;
  }

  .cds-permission-header .header-actions .btn,
  .cds-permission-header .header-actions .cds-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* Botón "Nuevo Permiso" full width en xs */
  .cds-permission-header .btn-primary,
  .cds-permission-header .btn-primary-custom {
    width: 100%;
    min-height: var(--cds-touch-target);
  }
}

/* ----- 76.8 Paginación de la vista de permisos ----- */
.cds-permission-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-sp-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--cds-sp-3) var(--cds-sp-4);
  border-top: 1px solid var(--cds-border);
  background: var(--cds-bg-alt);
}

.cds-permission-pagination .pagination {
  margin: 0;
}

@media (max-width: 575.98px) {
  .cds-permission-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cds-sp-3);
  }

  .cds-permission-pagination .pagination {
    justify-content: center;
  }
}

/* =========================================================
   FIN DEL ARCHIVO campol.css v1.5.1
   ========================================================= */