/* ╔══════════════════════════════════════════════════════════════╗
   ║  Aura Business Suite — Design System                         ║
   ║  §5.7 Tailwind + Glassmorphism + ApexCharts                  ║
   ║  §5.6 DataTables Responsive (scoped overrides)               ║
   ║  Mobile-first — breakpoints: 640px / 1024px                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. VARIABLES GLOBALES Y PALETA CROMÁTICA (10 FAMILIAS) ─────────── */
:root,
.aura-app-context {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── PALETA CROMÁTICA CANÓNICA AURA (10 FAMILIAS) ── */
    /* 1. INDIGO (Brand Principal / Sistema Aura) */
    --aura-indigo:        #4f46e5;
    --aura-indigo-hover:  #4338ca;
    --aura-indigo-light:  #818cf8;
    --aura-indigo-dark:   #3730a3;
    --aura-indigo-bg:     #eef2ff;
    --aura-indigo-border: #c7d2fe;
    --aura-indigo-glow:   rgba(79, 70, 229, 0.35);

    /* 2. VIOLET (Creativo / Analytics / Innovación) */
    --aura-violet:        #8b5cf6;
    --aura-violet-hover:  #7c3aed;
    --aura-violet-light:  #a78bfa;
    --aura-violet-dark:   #6d28d9;
    --aura-violet-bg:     #f5f3ff;
    --aura-violet-border: #ddd6fe;
    --aura-violet-glow:   rgba(139, 92, 246, 0.35);

    /* 3. BLUE (Corporativo / Operativo / Informaciones) */
    --aura-blue:          #2563eb;
    --aura-blue-hover:    #1d4ed8;
    --aura-blue-light:    #60a5fa;
    --aura-blue-dark:     #1e40af;
    --aura-blue-bg:       #eff6ff;
    --aura-blue-border:   #bfdbfe;
    --aura-blue-glow:     rgba(37, 99, 235, 0.35);

    /* 4. CYAN (Tecnología / Conectividad / Google Drive / Sincronización) */
    --aura-cyan:          #06b6d4;
    --aura-cyan-hover:    #0891b2;
    --aura-cyan-light:    #22d3ee;
    --aura-cyan-dark:     #0e7490;
    --aura-cyan-bg:       #ecfeff;
    --aura-cyan-border:   #a5f3fc;
    --aura-cyan-glow:     rgba(6, 182, 212, 0.35);

    /* 5. EMERALD (Éxito / Finanzas Positivas / Ingresos / Aprobado) */
    --aura-emerald:       #10b981;
    --aura-emerald-hover: #059669;
    --aura-emerald-light: #34d399;
    --aura-emerald-dark:  #047857;
    --aura-emerald-bg:    #ecfdf5;
    --aura-emerald-border:#a7f3d0;
    --aura-emerald-glow:  rgba(16, 185, 129, 0.35);

    /* 6. AMBER (Advertencia / Atención / En Espera / Pendiente) */
    --aura-amber:         #f59e0b;
    --aura-amber-hover:   #d97706;
    --aura-amber-light:   #fbbf24;
    --aura-amber-dark:    #b45309;
    --aura-amber-bg:      #fffbeb;
    --aura-amber-border:  #fde68a;
    --aura-amber-glow:    rgba(245, 158, 11, 0.35);

    /* 7. ROSE (Marketing / Campañas / Destacado / Vital) */
    --aura-rose:          #f43f5e;
    --aura-rose-hover:    #e11d48;
    --aura-rose-light:    #fb7185;
    --aura-rose-dark:     #be185d;
    --aura-rose-bg:       #fff1f2;
    --aura-rose-border:   #fecdd3;
    --aura-rose-glow:     rgba(244, 63, 94, 0.35);

    /* 8. RED (Peligro / Gastos / Egreso / Errores Críticos) */
    --aura-red:           #ef4444;
    --aura-red-hover:     #dc2626;
    --aura-red-light:     #f87171;
    --aura-red-dark:      #b91c1c;
    --aura-red-bg:        #fef2f2;
    --aura-red-border:    #fecaca;
    --aura-red-glow:      rgba(239, 68, 68, 0.35);

    /* 9. GOLD (Financiero VIP / Tesorería / Membresías / Premium) */
    --aura-gold:          #eab308;
    --aura-gold-hover:    #ca8a04;
    --aura-gold-light:    #fde047;
    --aura-gold-dark:     #a16207;
    --aura-gold-bg:       #fefce8;
    --aura-gold-border:   #fef08a;
    --aura-gold-glow:     rgba(234, 179, 8, 0.35);

    /* 10. SLATE (Estructura / Neutral / Sistema / Desactivado) */
    --aura-slate:         #64748b;
    --aura-slate-hover:   #475569;
    --aura-slate-light:   #94a3b8;
    --aura-slate-dark:    #334155;
    --aura-slate-bg:      #f8fafc;
    --aura-slate-border:  #e2e8f0;
    --aura-slate-glow:    rgba(100, 116, 139, 0.35);

    /* ── PALETA CANÓNICA BOOTSTRAP 5 (8 FAMILIAS SEMÁNTICAS) ── */
    /* 1. BS Primary */
    --aura-bs-primary:        #0d6efd;
    --aura-bs-primary-hover:  #0b5ed7;
    --aura-bs-primary-light:  #6ea8fe;
    --aura-bs-primary-dark:   #0a58ca;
    --aura-bs-primary-bg:     #cfe2ff;
    --aura-bs-primary-border: #9ec5fe;
    --aura-bs-primary-glow:   rgba(13, 110, 253, 0.35);

    /* 2. BS Secondary */
    --aura-bs-secondary:        #6c757d;
    --aura-bs-secondary-hover:  #5c636a;
    --aura-bs-secondary-light:  #a7acb1;
    --aura-bs-secondary-dark:   #495057;
    --aura-bs-secondary-bg:     #e2e3e5;
    --aura-bs-secondary-border: #c4c8cb;
    --aura-bs-secondary-glow:   rgba(108, 117, 125, 0.35);

    /* 3. BS Success */
    --aura-bs-success:        #198754;
    --aura-bs-success-hover:  #157347;
    --aura-bs-success-light:  #75b798;
    --aura-bs-success-dark:   #146c43;
    --aura-bs-success-bg:     #d1e7dd;
    --aura-bs-success-border: #a3cfbb;
    --aura-bs-success-glow:   rgba(25, 135, 84, 0.35);

    /* 4. BS Danger */
    --aura-bs-danger:        #dc3545;
    --aura-bs-danger-hover:  #bb2d3b;
    --aura-bs-danger-light:  #ea868f;
    --aura-bs-danger-dark:   #b02a37;
    --aura-bs-danger-bg:     #f8d7da;
    --aura-bs-danger-border: #f1aeb5;
    --aura-bs-danger-glow:   rgba(220, 53, 69, 0.35);

    /* 5. BS Warning */
    --aura-bs-warning:        #ffc107;
    --aura-bs-warning-hover:  #ffca2c;
    --aura-bs-warning-light:  #ffda6a;
    --aura-bs-warning-dark:   #cc9a06;
    --aura-bs-warning-bg:     #fff3cd;
    --aura-bs-warning-border: #ffe69c;
    --aura-bs-warning-glow:   rgba(255, 193, 7, 0.35);

    /* 6. BS Info */
    --aura-bs-info:        #0dcaf0;
    --aura-bs-info-hover:  #31d2f2;
    --aura-bs-info-light:  #6edff6;
    --aura-bs-info-dark:   #0aa2c0;
    --aura-bs-info-bg:     #cff4fc;
    --aura-bs-info-border: #9eeaf9;
    --aura-bs-info-glow:   rgba(13, 202, 240, 0.35);

    /* 7. BS Light */
    --aura-bs-light:        #f8f9fa;
    --aura-bs-light-hover:  #e9ecef;
    --aura-bs-light-light:  #ffffff;
    --aura-bs-light-dark:   #d3d4d5;
    --aura-bs-light-bg:     #f8f9fa;
    --aura-bs-light-border: #dfe3e6;
    --aura-bs-light-glow:   rgba(248, 249, 250, 0.35);

    /* 8. BS Dark */
    --aura-bs-dark:        #212529;
    --aura-bs-dark-hover:  #1c1f23;
    --aura-bs-dark-light:  #585e65;
    --aura-bs-dark-dark:   #141619;
    --aura-bs-dark-bg:     #2b3035;
    --aura-bs-dark-border: #373b3e;
    --aura-bs-dark-glow:   rgba(33, 37, 41, 0.35);

    /* ── ALIASES SEMÁNTICOS DIRECTOS COMPATIBLES ── */
    --aura-primary:       var(--aura-indigo);
    --aura-primary-light: var(--aura-indigo-light);
    --aura-primary-dark:  var(--aura-indigo-dark);
    --aura-secondary:     var(--aura-slate);
    --aura-success:       var(--aura-emerald);
    --aura-warning:       var(--aura-amber);
    --aura-danger:        var(--aura-red);
    --aura-info:          var(--aura-blue);

    /* ── SUPERFICIES & GLASS LIGHT ── */
    --aura-surface:       #ffffff;
    --aura-surface-alt:   #f8fafc;
    --aura-surface-hover: #f1f5f9;
    --aura-border:        #e2e8f0;
    --aura-text:          #0f172a;
    --aura-text-muted:    #64748b;
    --aura-glass-bg:      rgba(255,255,255,0.75);
    --aura-glass-border:  rgba(255,255,255,0.52);
    --aura-glass-shadow:  0 8px 32px rgba(79,70,229,0.10), 0 1.5px 6px rgba(0,0,0,0.06);
    --aura-tab-hover:     #e0e7ff;
    --aura-radius-lg:     16px;
    --aura-radius-md:     10px;
    --aura-radius-sm:     8px;
    --aura-transition:    .18s ease;

    /* Superficies y Tokens de Efectos Visuales */
    --bg-page:            #eef2ff;
    --bg-surface:         #ffffff;
    --bg-alt:             #f8fafc;
    --bg-code:            #1e1b4b;
    --border:             #e2e8f0;
    --border-code:        rgba(255,255,255,0.08);
    --tx-primary:         #0f172a;
    --tx-secondary:       #475569;
    --tx-muted:           #94a3b8;
    --tx-code:            #c7d2fe;
    --glass-bg:           rgba(255,255,255,0.72);
    --glass-border:       rgba(255,255,255,0.55);
    --sh-sm:              0 1px 3px rgba(0,0,0,0.06);
    --sh-md:              0 4px 16px rgba(79,70,229,0.10), 0 1px 4px rgba(0,0,0,0.06);
    --sh-lg:              0 12px 40px rgba(79,70,229,0.14), 0 2px 8px rgba(0,0,0,0.08);
    --sh-xl:              0 20px 60px rgba(79,70,229,0.18), 0 4px 16px rgba(0,0,0,0.10);
    --neu-bg:             #f0f4ff;
    --neu-shadow-out:     8px 8px 20px rgba(174,174,210,0.4), -8px -8px 20px rgba(255,255,255,0.85);
    --neu-shadow-in:      inset 5px 5px 12px rgba(174,174,210,0.4), inset -5px -5px 12px rgba(255,255,255,0.8);
    --r-sm:               8px;
    --r-md:               12px;
    --r-lg:               16px;
    --r-xl:               24px;
    --r-full:             9999px;
    --skel-from:          #f1f5f9;
    --skel-via:           #e2e8f0;
}

/* ── MODO OSCURO PARA VARIABLES Y PALETAS CROMÁTICAS ─────────── */
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
html[data-wp-dark-mode-scheme="dark"],
body[data-wp-dark-mode-scheme="dark"],
html.wp-dark-mode-active,
body.wp-dark-mode-active,
.wp-dark-mode-active,
html.aura-dark-mode,
body.aura-dark-mode,
.aura-dark-mode,
body.dark-mode,
body.admin-color-midnight,
body.admin-color-coffee {
    --aura-surface:       #16152b;
    --aura-surface-alt:   #1f1d38;
    --aura-surface-hover: #262444;
    --aura-border:        rgba(255, 255, 255, 0.08);
    --aura-text:          #f0efff;
    --aura-text-muted:    #a8a8c8;
    --aura-glass-bg:      rgba(22, 21, 43, 0.75);
    --aura-glass-border:  rgba(255, 255, 255, 0.08);
    --aura-glass-shadow:  0 12px 40px rgba(0, 0, 0, 0.45);

    /* Fondos y bordes armónicos para Dark Mode (10 familias) */
    --aura-indigo-bg:     rgba(79, 70, 229, 0.15);
    --aura-indigo-border: rgba(99, 102, 241, 0.35);
    --aura-indigo-dark:   #c7d2fe;

    --aura-violet-bg:     rgba(139, 92, 246, 0.15);
    --aura-violet-border: rgba(139, 92, 246, 0.35);
    --aura-violet-dark:   #ddd6fe;

    --aura-blue-bg:       rgba(37, 99, 235, 0.15);
    --aura-blue-border:   rgba(37, 99, 235, 0.35);
    --aura-blue-dark:     #bfdbfe;

    --aura-cyan-bg:       rgba(6, 182, 212, 0.15);
    --aura-cyan-border:   rgba(6, 182, 212, 0.35);
    --aura-cyan-dark:     #a5f3fc;

    --aura-emerald-bg:    rgba(16, 185, 129, 0.15);
    --aura-emerald-border:rgba(16, 185, 129, 0.35);
    --aura-emerald-dark:  #a7f3d0;

    --aura-amber-bg:      rgba(245, 158, 11, 0.15);
    --aura-amber-border:  rgba(245, 158, 11, 0.35);
    --aura-amber-dark:    #fde68a;

    --aura-rose-bg:       rgba(244, 63, 94, 0.15);
    --aura-rose-border:   rgba(244, 63, 94, 0.35);
    --aura-rose-dark:     #fecdd3;

    --aura-red-bg:        rgba(239, 68, 68, 0.15);
    --aura-red-border:    rgba(239, 68, 68, 0.35);
    --aura-red-dark:      #fecaca;

    --aura-gold-bg:       rgba(234, 179, 8, 0.15);
    --aura-gold-border:   rgba(234, 179, 8, 0.35);
    --aura-gold-dark:     #fef08a;

    --aura-slate-bg:      rgba(100, 116, 139, 0.15);
    --aura-slate-border:  rgba(100, 116, 139, 0.35);
    --aura-slate-dark:    #e2e8f0;

    /* Textos para Bootstrap 5 en Dark Mode */
    --aura-bs-primary-dark:   #9ec5fe;
    --aura-bs-secondary-dark: #e2e3e5;
    --aura-bs-success-dark:   #a3cfbb;
    --aura-bs-danger-dark:    #f1aeb5;
    --aura-bs-warning-dark:   #ffe69c;
    --aura-bs-info-dark:      #9eeaf9;
    --aura-bs-light-dark:     #ffffff;
    --aura-bs-dark-dark:      #dee2e6;

    /* Fondos y bordes armónicos para Dark Mode (Bootstrap 5) */
    --aura-bs-primary-bg:     rgba(13, 110, 253, 0.20);
    --aura-bs-primary-border: rgba(110, 168, 254, 0.40);
    --aura-bs-secondary-bg:   rgba(108, 117, 125, 0.20);
    --aura-bs-secondary-border:rgba(167, 172, 177, 0.40);
    --aura-bs-success-bg:     rgba(25, 135, 84, 0.20);
    --aura-bs-success-border: rgba(117, 183, 152, 0.40);
    --aura-bs-danger-bg:      rgba(220, 53, 69, 0.20);
    --aura-bs-danger-border:  rgba(234, 134, 143, 0.40);
    --aura-bs-warning-bg:     rgba(255, 193, 7, 0.20);
    --aura-bs-warning-border: rgba(255, 218, 106, 0.40);
    --aura-bs-info-bg:        rgba(13, 202, 240, 0.20);
    --aura-bs-info-border:    rgba(110, 223, 246, 0.40);
    --aura-bs-light-bg:       rgba(248, 249, 250, 0.10);
    --aura-bs-light-border:   rgba(255, 255, 255, 0.15);
    --aura-bs-dark-bg:        rgba(33, 37, 41, 0.50);
    --aura-bs-dark-border:    rgba(255, 255, 255, 0.12);

    /* Superficies y Tokens de Efectos en Dark Mode */
    --bg-page:            #0d0c1a;
    --bg-surface:         #16152b;
    --bg-alt:             #1f1d38;
    --bg-code:            #0d0c1a;
    --border:             rgba(255,255,255,0.08);
    --border-code:        rgba(255,255,255,0.06);
    --tx-primary:         #f0efff;
    --tx-secondary:       #a8a8c8;
    --tx-muted:           #5f5f80;
    --tx-code:            #c7d2fe;
    --glass-bg:           rgba(22,21,43,0.75);
    --glass-border:       rgba(255,255,255,0.07);
    --sh-sm:              0 1px 3px rgba(0,0,0,0.4);
    --sh-md:              0 4px 20px rgba(0,0,0,0.35);
    --sh-lg:              0 12px 40px rgba(0,0,0,0.5);
    --sh-xl:              0 20px 60px rgba(0,0,0,0.6);
    --neu-bg:             #1a1930;
    --neu-shadow-out:     8px 8px 20px rgba(0,0,0,0.5), -8px -8px 20px rgba(255,255,255,0.04);
    --neu-shadow-in:      inset 5px 5px 12px rgba(0,0,0,0.5), inset -5px -5px 12px rgba(255,255,255,0.03);
    --skel-from:          #1f1d38;
    --skel-via:           #2a2849;
}

/* ── 2. FONDO GRADIENTE DEL WRAPPER ────────────────────────── */
.aura-app-wrapper {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ede9fe 100%);
    min-height: 100vh;
    padding: 20px 0 20px;
    /* Neutraliza el padding lateral de WP en móvil */
    margin-left: -10px;
    padding-left: 10px;
}
@media (min-width: 640px) {
    .aura-app-wrapper {
        margin-left: -20px;
        padding-left: 20px;
        padding-top: 30px;
    }
}

/* ── 3. GLASS CARD ──────────────────────────────────────────── */
.aura-app-context .aura-glass-card {
    background: var(--aura-glass-bg);
    border: 1px solid var(--aura-glass-border);
    box-shadow: var(--aura-glass-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--aura-radius-lg);
    transition: box-shadow .2s;
}
@media (hover: hover) {
    .aura-app-context .aura-glass-card:hover {
        box-shadow: 0 12px 40px rgba(79,70,229,0.14), 0 2px 8px rgba(0,0,0,0.08);
    }
}

/* ── 4. LAYOUT PRINCIPAL — MOBILE FIRST ────────────────────── */
.aura-app-context .aura-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── 5. NAVBAR (Navegación Superior) ─────────────────────────── */
.aura-app-context .aura-navbar {
    order: 1;
    position: sticky;
    top: 32px; /* Admin bar de WP en escritorio */
    z-index: 100;
    transition: all var(--aura-transition);
    padding: 10px 16px;
    border-radius: var(--aura-radius-lg);
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.10), 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}
/* WordPress Admin Bar height adjustments */
@media (max-width: 782px) {
    .admin-bar .aura-app-context .aura-navbar {
        top: 46px;
    }
}
@media (min-width: 783px) {
    .admin-bar .aura-app-context .aura-navbar {
        top: 32px;
    }
}

.aura-app-context .aura-navbar.aura-navbar-shrink {
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

/* ── 5a. NAVBAR-MENU: contenedor flex de los ítems ─────── */
.aura-app-context .aura-navbar-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 5b. NAVBAR-ITEM: alias para los botones de pestañas ─ */
.aura-app-context .aura-navbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--aura-transition);
    color: #4b5563;
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.12);
    white-space: nowrap;
    font-family: inherit;
    text-decoration: none;
    flex-shrink: 0;
}
.aura-app-context .aura-navbar-item:hover {
    background: #e0e7ff;
    color: var(--aura-primary);
    text-decoration: none;
}
.aura-app-context .aura-navbar-item.active {
    background: var(--aura-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79,70,229,.35);
    text-decoration: none;
}
.aura-app-context .aura-navbar-shrink .aura-navbar-item {
    padding: 5px 11px;
    font-size: 12px;
}

.aura-app-context .aura-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    justify-content: flex-start;
}
@media (min-width: 1024px) {
    .aura-app-context .aura-nav {
        gap: 6px;
    }
}

.aura-app-context .aura-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 30px; /* Estilo Pill siempre */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--aura-transition);
    color: #4b5563;
    background: rgba(79,70,229,.05);
    border: 1px solid rgba(79,70,229,.1);
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}

.aura-app-context .aura-navbar-shrink .aura-tab-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.aura-app-context .aura-tab-btn:hover {
    background: var(--aura-tab-hover);
    color: var(--aura-primary);
}
.aura-app-context .aura-tab-btn.active {
    background: var(--aura-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79,70,229,.35);
}
.aura-app-context .aura-tab-btn.active .tab-icon { filter: brightness(5); }

/* ── 6. PANELES DE CONTENIDO ────────────────────────────────── */
.aura-app-context .aura-content { order: 2; width: 100%; min-width: 0; }
.aura-app-context .aura-tab-panel { display: none; }
.aura-app-context .aura-tab-panel.active { display: block; animation: aura-fade-in var(--aura-transition); }

@keyframes aura-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 7. CAMPOS DE FORMULARIO ────────────────────────────────── */
.aura-app-context .aura-field-group {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .aura-app-context .aura-field-group.cols-2 { grid-template-columns: 1fr 1fr; }
    .aura-app-context .aura-field-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.aura-app-context .aura-field { display: flex; flex-direction: column; gap: 5px; }
.aura-app-context .aura-label { font-size: 13px; font-weight: 600; color: #374151; }
.aura-app-context .aura-input {
    padding: 9px 13px;
    border-radius: 9px;
    border: 1.5px solid #d1d5db;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: border-color var(--aura-transition), box-shadow var(--aura-transition);
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}
.aura-app-context .aura-input:focus {
    outline: none;
    border-color: var(--aura-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.aura-app-context .aura-desc { font-size: 12px; color: #6b7280; line-height: 1.5; margin-top: 4px; }
.aura-app-context textarea.aura-input {
    resize: vertical;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
}
.aura-app-context select.aura-input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* ── 8. TOGGLE SWITCHES ─────────────────────────────────────── */
.aura-app-context .aura-toggle-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aura-app-context .aura-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.aura-app-context .aura-toggle input { opacity: 0; width: 0; height: 0; }
.aura-app-context .aura-toggle-slider {
    position: absolute; inset: 0; background: #d1d5db;
    border-radius: 24px; transition: .25s; cursor: pointer;
}
.aura-app-context .aura-toggle-slider::before {
    position: absolute; content: ""; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background: white; border-radius: 50%;
    transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.aura-app-context .aura-toggle input:checked + .aura-toggle-slider { background: var(--aura-primary); }
.aura-app-context .aura-toggle input:checked + .aura-toggle-slider::before { transform: translateX(20px); }

/* ── 9. BOTONES ──────────────────────────────────────────────── */
.aura-app-context .aura-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--aura-radius-md);
    font-size: 14px; font-weight: 600; border: none; cursor: pointer;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; box-shadow: 0 4px 15px rgba(79,70,229,.40);
    transition: all .2s; font-family: inherit; text-decoration: none;
}
.aura-app-context .aura-btn-primary:hover {
    transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,.50);
}
.aura-app-context .aura-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--aura-radius-md); font-size: 13px; font-weight: 600;
    cursor: pointer; background: #f3f4f6; color: #374151;
    border: 1.5px solid #d1d5db; transition: all .2s; font-family: inherit; text-decoration: none;
}
.aura-app-context .aura-btn-secondary:hover { background: #e0e7ff; border-color: var(--aura-primary); color: var(--aura-primary); }
.aura-app-context .aura-btn-success {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--aura-radius-md); font-size: 13px; font-weight: 600;
    cursor: pointer; background: #dcfce7; color: #15803d;
    border: 1.5px solid #86efac; transition: all .2s; font-family: inherit; text-decoration: none;
}
.aura-app-context .aura-btn-success:hover { background: #bbf7d0; }
.aura-app-context .aura-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: var(--aura-radius-md); font-size: 13px; font-weight: 600;
    cursor: pointer; background: #fee2e2; color: #b91c1c;
    border: 1.5px solid #fca5a5; transition: all .2s; font-family: inherit; text-decoration: none;
}
.aura-app-context .aura-btn-danger:hover { background: #fecaca; }

/* ── 10. STAT CARDS ─────────────────────────────────────────── */
.aura-app-context .aura-stat-card {
    border-radius: 12px; padding: 14px 18px;
    background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.12);
}
.aura-app-context .aura-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
    .aura-app-context .aura-stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .aura-app-context .aura-stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── 11. INFO BOXES ─────────────────────────────────────────── */
.aura-app-context .aura-info-box {
    border-radius: var(--aura-radius-md); padding: 14px 16px;
    background: rgba(59,130,246,.07); border-left: 4px solid #3b82f6;
}
.aura-app-context .aura-info-box.success { background: rgba(16,185,129,.07); border-color: #10b981; }
.aura-app-context .aura-info-box.warning { background: rgba(245,158,11,.07); border-color: #f59e0b; }
.aura-app-context .aura-info-box.danger  { background: rgba(239,68,68,.07);  border-color: #ef4444; }

/* ── 12. SECTION TITLE ──────────────────────────────────────── */
.aura-app-context .aura-section-title {
    font-size: 15px; font-weight: 700; color: #1e1b4b;
    margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 1.5px solid rgba(79,70,229,.12);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}

/* ── 13. BADGES ─────────────────────────────────────────────── */
.aura-app-context .aura-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.aura-app-context .aura-badge-green { background: #dcfce7; color: #15803d; }
.aura-app-context .aura-badge-blue  { background: #dbeafe; color: #1d4ed8; }
.aura-app-context .aura-badge-red   { background: #fee2e2; color: #dc2626; }
.aura-app-context .aura-badge-gray  { background: #f3f4f6; color: #6b7280; }
.aura-app-context .aura-badge-yellow { background: #fef9c3; color: #a16207; }

/* ── 14. CODE ───────────────────────────────────────────────── */
.aura-app-context code {
    background: rgba(79,70,229,.08); color: #4338ca;
    padding: 2px 7px; border-radius: 5px; font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    word-break: break-all;
}

/* ── 15. HEADER RESPONSIVE ──────────────────────────────────── */
.aura-app-context .aura-page-header {
    padding: 20px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(79,70,229,.90), rgba(109,40,217,.90));
    border: none; color: #fff;
}
@media (min-width: 640px) {
    .aura-app-context .aura-page-header {
        padding: 28px 32px; margin-bottom: 24px; flex-wrap: nowrap;
    }
}
.aura-app-context .aura-page-header-badges {
    display: flex; gap: 8px; flex-wrap: wrap; margin-left: 0;
}
@media (min-width: 640px) {
    .aura-app-context .aura-page-header-badges { margin-left: auto; }
}

/* ── 16. STICKY SAVE BAR ────────────────────────────────────── */
.aura-app-context .aura-sticky-bar {
    position: sticky; bottom: 0; z-index: 99;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(79,70,229,.15);
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(79,70,229,.10);
    margin: 0 -16px;
}
@media (min-width: 640px) {
    .aura-app-context .aura-sticky-bar { padding: 14px 24px; margin: 0 -24px; }
}

/* ── 17. TOAST (Notificaciones Flotantes) ───────────────────── */
.aura-toast-container {
    position: fixed; top: 40px; right: 16px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    max-width: calc(100vw - 32px);
}
@media (min-width: 640px) {
    .aura-toast-container { right: 24px; }
}
.aura-toast {
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff; padding: 12px 18px; border-radius: 12px;
    font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 25px rgba(16,185,129,.4);
    transform: translateY(-20px); opacity: 0;
    transition: all .35s cubic-bezier(.34,1.56,.64,1);
    font-family: 'Inter', sans-serif;
}
.aura-toast.show { opacity: 1; transform: translateY(0); }
.aura-toast.error {
    background: linear-gradient(135deg,#ef4444,#dc2626);
    box-shadow: 0 8px 25px rgba(239,68,68,.4);
}
.aura-toast.warning {
    background: linear-gradient(135deg,#f59e0b,#d97706);
    box-shadow: 0 8px 25px rgba(245,158,11,.4);
}

/* ── 18. MODALES ────────────────────────────────────────────── */
.aura-modal-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; visibility: hidden;
    transition: all .25s ease;
}
.aura-modal-overlay.active { opacity: 1; visibility: visible; }

/* WP Media Library sobre modales de Aura */
.media-modal-backdrop { z-index: 1000000 !important; }
.media-modal, .media-frame, .media-frame.mode-select, .media-frame.wp-core-ui { z-index: 1000001 !important; }
.aura-modal-content {
    background: #fff; border-radius: var(--aura-radius-lg);
    width: 100%; max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(0.95) translateY(10px);
    transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
}
.aura-modal-overlay.active .aura-modal-content {
    transform: scale(1) translateY(0);
}
.aura-modal-header {
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
    display: flex; justify-content: space-between; align-items: center;
}
.aura-modal-title { font-size: 16px; font-weight: 700; color: #111827; margin: 0; }
.aura-modal-close {
    background: none; border: none; font-size: 20px; color: #6b7280;
    cursor: pointer; transition: color .2s; padding: 4px;
}
.aura-modal-close:hover { color: #111827; }
.aura-modal-body { padding: 20px; overflow-y: auto; }
.aura-modal-footer {
    padding: 16px 20px; border-top: 1px solid #e5e7eb;
    display: flex; justify-content: flex-end; gap: 10px;
    background: #f9fafb; border-bottom-left-radius: var(--aura-radius-lg);
    border-bottom-right-radius: var(--aura-radius-lg);
}

/* ── 19. ANIMACIONES ────────────────────────────────────────── */
@keyframes aura-spin { to { transform: rotate(360deg); } }
.aura-spin { animation: aura-spin 1s linear infinite; }

/* ── 20. §5.6 DATATABLES RESPONSIVE — Scoped overrides ───────── */
.aura-app-context table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.aura-app-context table.dataTable thead th {
    background: rgba(79,70,229,.07);
    color: #374151; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(79,70,229,.15) !important;
    padding: 10px 14px;
}
.aura-app-context table.dataTable thead th.sorting::after,
.aura-app-context table.dataTable thead th.sorting_asc::after,
.aura-app-context table.dataTable thead th.sorting_desc::after { opacity: 0.6; }
.aura-app-context table.dataTable tbody tr { transition: background var(--aura-transition); }
.aura-app-context table.dataTable tbody tr:hover { background: rgba(79,70,229,.04) !important; }
.aura-app-context table.dataTable tbody td {
    padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.04) !important;
    vertical-align: middle; color: #374151;
}
.aura-app-context table.dataTable tbody tr:last-child td { border-bottom: none !important; }
.aura-app-context .dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #d1d5db; border-radius: 8px; padding: 6px 12px;
    font-family: inherit; font-size: 13px;
    transition: border-color var(--aura-transition), box-shadow var(--aura-transition);
}
.aura-app-context .dataTables_wrapper .dataTables_filter input:focus {
    outline: none; border-color: var(--aura-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.aura-app-context .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important; font-family: inherit; font-size: 13px;
}
.aura-app-context .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.aura-app-context .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--aura-primary) !important; border-color: var(--aura-primary) !important; color: #fff !important;
}
.aura-app-context .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--aura-tab-hover) !important; border-color: transparent !important; color: var(--aura-primary) !important;
}
.aura-app-context .dataTables_wrapper .dataTables_info { font-size: 12px; color: #6b7280; }
.aura-app-context table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.aura-app-context table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--aura-primary) !important; box-shadow: 0 0 3px rgba(79,70,229,.4);
}
.aura-app-context .aura-dt-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--aura-radius-md); border: 1px solid rgba(79,70,229,.10);
}
.aura-app-context .aura-nav-divider { border-top: 1px solid #e5e7eb; margin: 6px 4px; }
@media (min-width: 1024px) { .aura-app-context .aura-nav-divider { margin: 8px 0; } }

/* ── 14. REPORTES Y CIERRE ──────────────────────────────── */
.aura-app-context .aura-report-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.aura-app-context .aura-report-kpi {
    background: rgba(255,255,255,.9);
    border-radius: var(--aura-radius-md);
    border: 1px solid rgba(79,70,229,.12);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aura-app-context .aura-report-kpi__label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.aura-app-context .aura-report-kpi strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--aura-primary);
}
.aura-app-context .aura-report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 900px) {
    .aura-app-context .aura-report-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.aura-app-context .aura-report-panel {
    background: rgba(255,255,255,.92);
    border-radius: var(--aura-radius-md);
    border: 1px solid rgba(79,70,229,.10);
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.aura-app-context .aura-report-panel h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--aura-primary);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(79,70,229,.10);
}
.aura-app-context .aura-report-panel h4 {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px;
}
.aura-app-context .aura-report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--aura-radius-sm);
}
.aura-app-context .aura-report-table-wrap table {
    font-size: 12px;
    min-width: 100%;
}
.aura-app-context .aura-report-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 680px) {
    .aura-app-context .aura-report-dual {
        grid-template-columns: 1fr;
    }
}
.aura-app-context .aura-report-panel--audit {
    grid-column: 1 / -1;
}
.aura-app-context .aura-report-audit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aura-app-context .aura-report-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--aura-radius-sm);
    background: #fef3c7;
    border: 1px solid #fcd34d;
    font-size: 12px;
}
.aura-app-context .aura-report-audit-item.is-ok {
    background: #d1fae5;
    border-color: #6ee7b7;
}
.aura-app-context .aura-report-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.aura-app-context .aura-card-head--reports {
    flex-wrap: wrap;
    gap: 10px;
}
.aura-app-context .aura-report-budget-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.aura-app-context .aura-report-budget-summary-item {
    flex: 1 1 120px;
    background: rgba(79,70,229,.07);
    border-radius: var(--aura-radius-sm);
    padding: 8px 12px;
    font-size: 12px;
    text-align: center;
}
.aura-app-context .aura-report-budget-summary-item span {
    display: block;
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 2px;
}
.aura-app-context .aura-report-budget-summary-item strong {
    font-weight: 700;
    color: var(--aura-primary);
}

/* ── 16. AVISOS DE WORDPRESS EN AURA SUITE ─────────────────── */
#aura-wp-notices-container,
.aura-wp-notices-container {
    width: 100%;
    margin: 0 0 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#aura-wp-notices-container .notice,
#aura-wp-notices-container .updated,
#aura-wp-notices-container .error,
#aura-wp-notices-container .update-nag {
    margin: 0 !important;
    position: relative;
    z-index: 5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.aura-widget-card .notice:not(.aura-inline-feedback),
.aura-widget-card .updated:not(.aura-inline-feedback),
.aura-widget-card .error:not(.aura-inline-feedback) {
    margin: 12px 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   17. COMPONENTES CANÓNICOS DEL DESIGN SYSTEM (AURA SUITE)
   ══════════════════════════════════════════════════════════════ */

/* ── 17a. HERO BANNER / PAGE HEADER GLASS CARD ──────────────── */
.aura-page-header,
.aura-glass-card.aura-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border-radius: var(--aura-radius-lg, 14px);
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25) !important;
    color: #ffffff !important;
    box-sizing: border-box;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.aura-page-header__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.aura-page-header__icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.aura-page-header__content {
    flex: 1 1 auto;
    min-width: 0;
}

.aura-page-header__content h1 {
    margin: 0;
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
}

.aura-page-header__content p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.88rem;
    line-height: 1.5;
}

.aura-page-header__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.aura-page-header__badges .aura-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* Hero Banner Superior (Estilo Libro Mayor / Encabezado Expandido) */
.aura-hero-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--aura-radius-lg, 16px);
    padding: 24px 28px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.aura-hero-content {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 260px;
}

.aura-hero-icon-box {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #60a5fa;
}

.aura-hero-icon-box .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.aura-hero-titles {
    flex: 1;
}

.aura-hero-subtitle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.aura-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.aura-tag-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.15);
}

.aura-hero-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.2;
}

.aura-hero-desc {
    margin: 6px 0 0 0;
    font-size: 13.5px;
    color: #cbd5e1 !important;
    line-height: 1.4;
}

.aura-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── 17b. BARRA DE ACCIONES SUPERIOR (.aura-top-actions) ─────── */
.aura-top-actions,
.aura-cat-top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aura-actions-left,
.aura-actions-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── 17c. TARJETAS DE ESTADÍSTICAS KPI (.aura-stats-grid) ────── */
.aura-stats-grid,
.aura-ud-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.aura-stat-card,
.aura-ud-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--aura-radius-md, 10px);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aura-stat-card:hover,
.aura-ud-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.aura-stat-card::before,
.aura-ud-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.aura-stat-card.income::before, .aura-ud-stat-card.income::before { background: #10b981; }
.aura-stat-card.expense::before, .aura-ud-stat-card.expense::before { background: #ef4444; }
.aura-stat-card.capital::before { background: #8b5cf6; }
.aura-stat-card.balance::before, .aura-ud-stat-card.balance.positive::before { background: #2563eb; }
.aura-ud-stat-card.balance.negative::before { background: #ef4444; }
.aura-stat-card.pending::before, .aura-ud-stat-card.pending::before { background: #f59e0b; }
.aura-stat-card.count::before { background: #64748b; }

.aura-stat-icon-wrap,
.stat-icon-wrap,
.aura-ud-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aura-stat-card.income .aura-stat-icon-wrap, .aura-ud-stat-card.income .aura-ud-stat-icon-wrap { background: #ecfdf5; color: #059669; }
.aura-stat-card.expense .aura-stat-icon-wrap, .aura-ud-stat-card.expense .aura-ud-stat-icon-wrap { background: #fef2f2; color: #dc2626; }
.aura-stat-card.capital .aura-stat-icon-wrap { background: #f5f3ff; color: #7c3aed; }
.aura-stat-card.balance .aura-stat-icon-wrap, .aura-ud-stat-card.balance.positive .aura-ud-stat-icon-wrap { background: #eff6ff; color: #2563eb; }
.aura-ud-stat-card.balance.negative .aura-ud-stat-icon-wrap { background: #fef2f2; color: #dc2626; }
.aura-stat-card.pending .aura-stat-icon-wrap, .aura-ud-stat-card.pending .aura-ud-stat-icon-wrap { background: #fffbeb; color: #d97706; }
.aura-stat-card.count .aura-stat-icon-wrap { background: #f1f5f9; color: #475569; }

.aura-stat-icon-wrap .dashicons,
.stat-icon-wrap .dashicons,
.aura-ud-stat-icon-wrap .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.aura-stat-body,
.stat-content,
.aura-ud-stat-body {
    flex: 1;
    min-width: 0;
}

.aura-stat-label-wrap,
.aura-ud-stat-label-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.aura-stat-label,
.stat-label,
.aura-ud-stat-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aura-stat-value,
.stat-value,
.aura-ud-stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.aura-stat-card.income .aura-stat-value, .aura-ud-stat-card.income .aura-ud-stat-value { color: #059669; }
.aura-stat-card.expense .aura-stat-value, .aura-ud-stat-card.expense .aura-ud-stat-value { color: #dc2626; }
.aura-stat-card.capital .aura-stat-value { color: #7c3aed; }
.aura-stat-card.balance .aura-stat-value, .aura-ud-stat-card.balance.positive .aura-ud-stat-value { color: #2563eb; }
.aura-ud-stat-card.balance.negative .aura-ud-stat-value { color: #dc2626; }
.aura-stat-card.pending .aura-stat-value, .aura-ud-stat-card.pending .aura-ud-stat-value { color: #d97706; }

.aura-stat-sub,
.aura-ud-stat-sub {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Tooltip wrap en KPI */
.aura-tooltip-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: help;
}

.aura-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    transition: color 0.15s ease;
}

.aura-help-icon:hover {
    color: #3b82f6;
}

.aura-help-icon .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ── 17d. SIDEBAR DE FILTROS COLAPSABLE ──────────────────────── */
.aura-filters-card,
#aura-filters-sidebar {
    width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--aura-radius-md, 10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    transition: all 0.3s ease;
    max-height: calc(100vh - 140px);
    position: sticky;
    top: 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

.aura-filters-card *,
#aura-filters-sidebar * {
    box-sizing: border-box;
}

.aura-filters-card.collapsed,
#aura-filters-sidebar.collapsed {
    display: none !important;
}

.aura-filters-header {
    background: #f8fafc;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aura-filters-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aura-filters-header-title h3,
.aura-filters-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.aura-active-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.aura-toggle-sidebar-btn,
#toggle-filters {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.aura-toggle-sidebar-btn:hover,
#toggle-filters:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.aura-filters-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-section h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── 17e. CHIPS DE PERÍODO RÁPIDO (.aura-quick-date-chips) ───── */
.aura-quick-date-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.aura-chips-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.aura-chip-btn,
.aura-date-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.aura-chip-btn:hover,
.aura-date-preset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.aura-chip-btn.active,
.aura-chip-btn.is-active,
.aura-date-preset-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* ── 17f. BOTONERA DE ACCIONES (SOLO ICONOS + TOOLTIP) ───────── */
.aura-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.aura-btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    padding: 0;
}

.aura-btn-action-icon .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
    line-height: 17px;
}

.aura-btn-action-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.aura-btn-action-icon.aura-btn-view:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.aura-btn-action-icon.aura-btn-edit:hover {
    background: #fefce8;
    border-color: #fde047;
    color: #ca8a04;
}

.aura-btn-action-icon.aura-btn-delete:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.aura-btn-action-icon.aura-btn-approve:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #059669;
}

.aura-btn-action-icon.aura-btn-reject:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.aura-btn-action-icon.aura-btn-print:hover {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #7c3aed;
}

.aura-btn-action-icon.aura-btn-download:hover {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

.aura-btn-action-icon.aura-btn-link:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

/* ── 17g. AVATAR CIRCULAR CON FALLBACK ───────────────────────── */
.aura-avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    vertical-align: middle;
    flex-shrink: 0;
}

.aura-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aura-avatar-circle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #94a3b8;
}

.aura-avatar-circle--sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
}

.aura-avatar-circle--sm .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.aura-avatar-circle--lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
}

.aura-avatar-circle--lg .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
}

/* ── 17h. EMPTY STATE CANÓNICO ───────────────────────────────── */
.aura-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: #ffffff;
    border-radius: var(--aura-radius-md, 10px);
    border: 1px dashed #cbd5e1;
    margin: 20px 0;
}

.aura-empty-icon-box {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.aura-empty-icon-box .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.aura-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.aura-empty-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* ── 17i. PRINT HEADER CANÓNICO ──────────────────────────────── */
.aura-print-header {
    display: none;
}

@media print {
    .aura-print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 16px;
        margin-bottom: 20px;
        border-bottom: 2px solid #0f172a;
    }

    .aura-print-header__brand-box {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .aura-print-header__brand-title {
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .aura-print-header__brand-sub {
        font-size: 11px;
        color: #64748b;
        margin: 2px 0 0 0;
    }

    .aura-print-header__meta {
        text-align: right;
        font-size: 10px;
        color: #64748b;
    }
}

/* ── 17j. TABLA FLUIDA DATATABLES (ZERO HORIZONTAL SCROLL) ───── */
.aura-dt-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--aura-radius-md, 10px);
    border: 1px solid rgba(79, 70, 229, 0.10);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.aura-dt-wrapper table.dataTable {
    width: 100% !important;
    table-layout: auto !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    border-collapse: collapse;
    margin: 0 !important;
}

.aura-dt-wrapper table.dataTable thead th {
    background: rgba(79, 70, 229, 0.06);
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px;
    border-bottom: 2px solid rgba(79, 70, 229, 0.15);
}

.aura-dt-wrapper table.dataTable tbody td {
    padding: 10px 14px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.aura-dt-wrapper table.dataTable tbody tr:hover {
    background: rgba(79, 70, 229, 0.03) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   18. EFECTOS VISUALES MODERNOS Y MICRO-ANIMACIONES (AURA DESIGN SYSTEM)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 18a. BOTONES CON DESTELLO ELEGANTE (SHIMMER) ────────────────────────── */
.aura-btn-shimmer {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.aura-btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.35) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    transition: all 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.aura-btn-shimmer:hover::before {
    left: 140%;
}

/* ── 18b. INDICADORES DE ESTADO EN VIVO CON PULSO (LIVE PULSE) ─────────── */
.aura-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.aura-pulse-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.75;
    animation: auraPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes auraPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    60% {
        transform: scale(2.4);
        opacity: 0;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.aura-pulse-dot--online,
.aura-pulse-dot--success {
    background-color: var(--aura-success-500, #10b981);
}

.aura-pulse-dot--warning {
    background-color: var(--aura-warning-500, #f59e0b);
}

.aura-pulse-dot--danger,
.aura-pulse-dot--offline {
    background-color: var(--aura-danger-500, #ef4444);
}

.aura-pulse-dot--primary {
    background-color: var(--aura-primary-500, #8b5cf6);
}

.aura-pulse-dot--info {
    background-color: var(--aura-info-500, #0284c7);
}

/* Badge con indicador en vivo */
.aura-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: var(--aura-radius-full, 9999px);
    font-size: 12px;
    font-weight: 600;
    background: var(--aura-surface-alt, #f8fafc);
    border: 1px solid var(--aura-border, #e2e8f0);
    color: var(--aura-text-primary, #1e293b);
}

.aura-live-indicator--online {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.aura-live-indicator--warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.aura-live-indicator--danger {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

/* ── 18c. BORDE LUMINOSO ANIMADO (GLOW BORDER) ─────────────────────────── */
.aura-glow-border {
    position: relative;
    border-radius: var(--aura-radius-lg, 12px);
    background: var(--aura-surface, #ffffff);
    z-index: 1;
}

.aura-glow-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--aura-primary-500, #8b5cf6), #06b6d4, var(--aura-primary-700, #6d28d9), #3b82f6);
    background-size: 300% 300%;
    animation: auraGlowAnimation 5s ease infinite;
    border-radius: calc(var(--aura-radius-lg, 12px) + 2px);
    z-index: -1;
    opacity: 0.85;
}

@keyframes auraGlowAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 18d. TEXTOS CON GRADIENTES MODERNOS ───────────────────────────────── */
.aura-text-gradient {
    background: linear-gradient(135deg, var(--aura-primary-700, #6d28d9) 0%, var(--aura-primary-500, #8b5cf6) 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.aura-text-gradient--gold {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.aura-text-gradient--ocean {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── 18e. SEPARADORES CON DESVANECIMIENTO (GRADIENT DIVIDERS) ─────────── */
.aura-divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--aura-border, #e2e8f0) 25%, var(--aura-primary-300, #c4b5fd) 50%, var(--aura-border, #e2e8f0) 75%, transparent 100%);
    margin: var(--aura-space-5, 20px) 0;
    border: none;
    width: 100%;
}

.aura-divider-gradient--thick {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--aura-primary-400, #a78bfa) 50%, transparent 100%);
}

/* ── 18f. BARRA DE CARGA DINÁMICA ULTRA-DELGADA ────────────────────────── */
.aura-loading-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--aura-primary-500, #8b5cf6), #06b6d4, var(--aura-primary-600, #7c3aed));
    background-size: 200% 100%;
    animation: auraLoadingAnimation 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: var(--aura-radius-full, 9999px);
}

@keyframes auraLoadingAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 18g. UTILIDADES DE ANIMACIONES DE ENTRADA SUAVE ───────────────────── */
.aura-fade-up {
    animation: auraFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes auraFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aura-fade-scale {
    animation: auraFadeScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes auraFadeScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.aura-fade-in {
    animation: auraFadeIn 0.25s ease forwards;
}

@keyframes auraFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── 18h. ELEVACIÓN SUAVE EN HOVER PARA TARJETAS (CARD LIFT) ───────────── */
.aura-card-lift {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.aura-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(124, 58, 237, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

/* ── 18i. INSETS PARA CONTROLES DE BÚSQUEDA Y FILTRADO ACTIVO ──────────── */
.aura-inset-field {
    background: var(--aura-surface-alt, #f8fafc) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    border-color: var(--aura-border, #e2e8f0) !important;
}

.aura-inset-field:focus {
    background: var(--aura-surface, #ffffff) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   19. UTILIDADES CROMÁTICAS SISTEMÁTICAS (10 FAMILIAS AURA)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 19a. BOTONES DE FAMILIA CROMÁTICA ─────────────────────────────────── */
.aura-btn-indigo  { background: var(--aura-indigo); color: #fff !important; border: none; }
.aura-btn-indigo:hover { background: var(--aura-indigo-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-indigo-glow); }

.aura-btn-violet  { background: var(--aura-violet); color: #fff !important; border: none; }
.aura-btn-violet:hover { background: var(--aura-violet-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-violet-glow); }

.aura-btn-blue    { background: var(--aura-blue); color: #fff !important; border: none; }
.aura-btn-blue:hover { background: var(--aura-blue-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-blue-glow); }

.aura-btn-cyan    { background: var(--aura-cyan); color: #fff !important; border: none; }
.aura-btn-cyan:hover { background: var(--aura-cyan-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-cyan-glow); }

.aura-btn-emerald { background: var(--aura-emerald); color: #fff !important; border: none; }
.aura-btn-emerald:hover { background: var(--aura-emerald-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-emerald-glow); }

.aura-btn-amber   { background: var(--aura-amber); color: #fff !important; border: none; }
.aura-btn-amber:hover { background: var(--aura-amber-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-amber-glow); }

.aura-btn-rose    { background: var(--aura-rose); color: #fff !important; border: none; }
.aura-btn-rose:hover { background: var(--aura-rose-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-rose-glow); }

.aura-btn-red     { background: var(--aura-red); color: #fff !important; border: none; }
.aura-btn-red:hover { background: var(--aura-red-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-red-glow); }

.aura-btn-gold    { background: linear-gradient(135deg, var(--aura-gold), var(--aura-gold-hover)); color: #1e1b4b !important; font-weight: 700; border: none; }
.aura-btn-gold:hover { background: linear-gradient(135deg, var(--aura-gold-hover), #854d0e); color: #fff !important; box-shadow: 0 4px 14px var(--aura-gold-glow); }

.aura-btn-slate   { background: var(--aura-slate); color: #fff !important; border: none; }
.aura-btn-slate:hover { background: var(--aura-slate-hover); color: #fff !important; box-shadow: 0 4px 14px var(--aura-slate-glow); }

/* Outline variantes */
.aura-btn-outline-indigo  { background: transparent; border: 1.5px solid var(--aura-indigo-border); color: var(--aura-indigo) !important; }
.aura-btn-outline-indigo:hover { background: var(--aura-indigo-bg); border-color: var(--aura-indigo); }

.aura-btn-outline-violet  { background: transparent; border: 1.5px solid var(--aura-violet-border); color: var(--aura-violet) !important; }
.aura-btn-outline-violet:hover { background: var(--aura-violet-bg); border-color: var(--aura-violet); }

.aura-btn-outline-cyan    { background: transparent; border: 1.5px solid var(--aura-cyan-border); color: var(--aura-cyan-dark) !important; }
.aura-btn-outline-cyan:hover { background: var(--aura-cyan-bg); border-color: var(--aura-cyan); }

.aura-btn-outline-emerald { background: transparent; border: 1.5px solid var(--aura-emerald-border); color: var(--aura-emerald-dark) !important; }
.aura-btn-outline-emerald:hover { background: var(--aura-emerald-bg); border-color: var(--aura-emerald); }

.aura-btn-outline-amber   { background: transparent; border: 1.5px solid var(--aura-amber-border); color: var(--aura-amber-dark) !important; }
.aura-btn-outline-amber:hover { background: var(--aura-amber-bg); border-color: var(--aura-amber); }

.aura-btn-outline-gold    { background: transparent; border: 1.5px solid var(--aura-gold-border); color: var(--aura-gold-dark) !important; }
.aura-btn-outline-gold:hover { background: var(--aura-gold-bg); border-color: var(--aura-gold); }

.aura-btn-outline-rose    { background: transparent; border: 1.5px solid var(--aura-rose-border); color: var(--aura-rose-dark) !important; }
.aura-btn-outline-rose:hover { background: var(--aura-rose-bg); border-color: var(--aura-rose); }

/* ── 19b. BADGES Y CHIPS DE LAS 10 FAMILIAS ────────────────────────────── */
.aura-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.aura-badge-indigo  { background: var(--aura-indigo-bg);  border-color: var(--aura-indigo-border);  color: var(--aura-indigo-dark); }
.aura-badge-violet  { background: var(--aura-violet-bg);  border-color: var(--aura-violet-border);  color: var(--aura-violet-dark); }
.aura-badge-blue    { background: var(--aura-blue-bg);    border-color: var(--aura-blue-border);    color: var(--aura-blue-dark); }
.aura-badge-cyan    { background: var(--aura-cyan-bg);    border-color: var(--aura-cyan-border);    color: var(--aura-cyan-dark); }
.aura-badge-emerald { background: var(--aura-emerald-bg); border-color: var(--aura-emerald-border); color: var(--aura-emerald-dark); }
.aura-badge-amber   { background: var(--aura-amber-bg);   border-color: var(--aura-amber-border);   color: var(--aura-amber-dark); }
.aura-badge-rose    { background: var(--aura-rose-bg);    border-color: var(--aura-rose-border);    color: var(--aura-rose-dark); }
.aura-badge-red     { background: var(--aura-red-bg);     border-color: var(--aura-red-border);     color: var(--aura-red-dark); }
.aura-badge-gold    { background: var(--aura-gold-bg);    border-color: var(--aura-gold-border);    color: var(--aura-gold-dark); }
.aura-badge-slate   { background: var(--aura-slate-bg);   border-color: var(--aura-slate-border);   color: var(--aura-slate-dark); }

[data-theme="dark"] .aura-badge-indigo  { color: var(--aura-indigo-light); }
[data-theme="dark"] .aura-badge-violet  { color: var(--aura-violet-light); }
[data-theme="dark"] .aura-badge-blue    { color: var(--aura-blue-light); }
[data-theme="dark"] .aura-badge-cyan    { color: var(--aura-cyan-light); }
[data-theme="dark"] .aura-badge-emerald { color: var(--aura-emerald-light); }
[data-theme="dark"] .aura-badge-amber   { color: var(--aura-amber-light); }
[data-theme="dark"] .aura-badge-rose    { color: var(--aura-rose-light); }
[data-theme="dark"] .aura-badge-red     { color: var(--aura-red-light); }
[data-theme="dark"] .aura-badge-gold    { color: var(--aura-gold-light); }
[data-theme="dark"] .aura-badge-slate   { color: var(--aura-slate-light); }

/* ── 19c. PULSE DOTS DE LAS 10 FAMILIAS ────────────────────────────────── */
.aura-pulse-dot--indigo  { background-color: var(--aura-indigo); }
.aura-pulse-dot--violet  { background-color: var(--aura-violet); }
.aura-pulse-dot--blue    { background-color: var(--aura-blue); }
.aura-pulse-dot--cyan    { background-color: var(--aura-cyan); }
.aura-pulse-dot--emerald { background-color: var(--aura-emerald); }
.aura-pulse-dot--amber   { background-color: var(--aura-amber); }
.aura-pulse-dot--rose    { background-color: var(--aura-rose); }
.aura-pulse-dot--red     { background-color: var(--aura-red); }
.aura-pulse-dot--gold    { background-color: var(--aura-gold); }
.aura-pulse-dot--slate   { background-color: var(--aura-slate); }

/* ── 19d. GLOW BORDERS ENFOCADOS ───────────────────────────────────────── */
.aura-glow-border--gold::before {
    background: linear-gradient(45deg, #eab308, #ca8a04, #fde047, #b45309);
    background-size: 300% 300%;
}
.aura-glow-border--emerald::before {
    background: linear-gradient(45deg, #10b981, #059669, #34d399, #06b6d4);
    background-size: 300% 300%;
}
.aura-glow-border--cyan::before {
    background: linear-gradient(45deg, #06b6d4, #0284c7, #38bdf8, #6366f1);
    background-size: 300% 300%;
}
.aura-glow-border--rose::before {
    background: linear-gradient(45deg, #f43f5e, #be185d, #fb7185, #8b5cf6);
    background-size: 300% 300%;
}

/* ── 19e. GRADIENTES DE TEXTO CANÓNICOS ───────────────────────────────── */
.aura-text-gradient--indigo {
    background: linear-gradient(135deg, var(--aura-indigo) 0%, var(--aura-violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aura-text-gradient--emerald {
    background: linear-gradient(135deg, #047857 0%, var(--aura-emerald) 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aura-text-gradient--rose {
    background: linear-gradient(135deg, #be185d 0%, var(--aura-rose) 50%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── 19f. TARJETAS KPI MULTI-FAMILIA ──────────────────────────────────── */
.aura-kpi-card {
    background: var(--aura-surface, #ffffff);
    border: 1px solid var(--aura-border, #e2e8f0);
    border-radius: var(--aura-radius-lg, 14px);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.aura-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
.aura-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kpi-accent, var(--aura-indigo));
}
.aura-kpi-card--indigo  { --kpi-accent: var(--aura-indigo); }
.aura-kpi-card--violet  { --kpi-accent: var(--aura-violet); }
.aura-kpi-card--blue    { --kpi-accent: var(--aura-blue); }
.aura-kpi-card--cyan    { --kpi-accent: var(--aura-cyan); }
.aura-kpi-card--emerald { --kpi-accent: var(--aura-emerald); }
.aura-kpi-card--amber   { --kpi-accent: var(--aura-amber); }
.aura-kpi-card--rose    { --kpi-accent: var(--aura-rose); }
.aura-kpi-card--red     { --kpi-accent: var(--aura-red); }
.aura-kpi-card--gold    { --kpi-accent: var(--aura-gold); }
.aura-kpi-card--slate   { --kpi-accent: var(--aura-slate); }

/* ── 19g. SISTEMA GLOBAL DE BOTONES WOW & INTERACTIVOS (AURA DESIGN SYSTEM) ── */
/* 1. Reset e Inmunidad Universal contra WordPress Core (.wp-core-ui) */
.btn,
.aura-btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
.wp-core-ui .aura-app-wrapper .btn,
.wp-core-ui .aura-permissions-wrap .btn,
.aura-app-wrapper button.btn,
.aura-app-wrapper a.btn {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 8px 16px !important;
    border-radius: var(--r-md, 10px) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    user-select: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    outline: none !important;
    vertical-align: middle !important;
}

/* Modificadores de Tamaño */
.btn-sm,
.aura-btn-sm {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    border-radius: var(--r-sm, 8px) !important;
    gap: 6px !important;
}
.btn-lg,
.aura-btn-lg {
    padding: 11px 22px !important;
    font-size: 14.5px !important;
    border-radius: var(--r-lg, 12px) !important;
    gap: 10px !important;
}
.btn-hero,
.aura-btn-hero {
    padding: 13px 28px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: var(--r-lg, 12px) !important;
    gap: 10px !important;
}

/* Iconos (.dashicons, svg, img) dentro de cualquier botón .btn */
.btn > .dashicons,
.btn > svg,
.btn > img,
.aura-btn > .dashicons,
.aura-btn > svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    transition: transform 0.22s ease, filter 0.22s ease !important;
    color: inherit !important;
    fill: currentColor !important;
}
.btn:hover > .dashicons,
.btn:hover > svg {
    transform: scale(1.15) !important;
}

/* ── HERENCIA Y CONTRASTE AUTOMÁTICO PARA TEXTO E ICONOS EN BOTONES ── */
.btn > span,
.btn span,
.aura-btn > span,
.aura-btn span {
    color: inherit !important;
    line-height: inherit !important;
    vertical-align: middle !important;
}
.btn > .dashicons,
.btn .dashicons,
.btn > svg,
.btn svg,
.aura-btn > .dashicons,
.aura-btn .dashicons,
.aura-btn > svg,
.aura-btn svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* Forzar texto e icono blanco en botones sólidos con fondo vibrante/oscuro */
.btn-violet, .btn-violet span, .btn-violet .dashicons, .btn-violet svg,
.btn-primary, .btn-primary span, .btn-primary .dashicons, .btn-primary svg,
.btn-emerald, .btn-emerald span, .btn-emerald .dashicons, .btn-emerald svg,
.btn-indigo, .btn-indigo span, .btn-indigo .dashicons, .btn-indigo svg,
.btn-rose, .btn-rose span, .btn-rose .dashicons, .btn-rose svg,
.btn-danger, .btn-danger span, .btn-danger .dashicons, .btn-danger svg,
.btn-amber, .btn-amber span, .btn-amber .dashicons, .btn-amber svg,
.btn-cyan, .btn-cyan span, .btn-cyan .dashicons, .btn-cyan svg,
.btn-dark, .btn-dark span, .btn-dark .dashicons, .btn-dark svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Forzar texto e icono oscuro en botones claros en MODO CLARO (#1e293b) */
.btn-secondary, .btn-secondary span, .btn-secondary .dashicons, .btn-secondary svg,
.btn-light, .btn-light span, .btn-light .dashicons, .btn-light svg {
    color: #1e293b !important;
    fill: #1e293b !important;
}
.btn-secondary:hover, .btn-secondary:hover span, .btn-secondary:hover .dashicons, .btn-secondary:hover svg,
.btn-light:hover, .btn-light:hover span, .btn-light:hover .dashicons, .btn-light:hover svg {
    color: #0f172a !important;
    fill: #0f172a !important;
}

/* Efecto de Icono Palpitante Rítmico */
@keyframes aura-pulse-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); filter: drop-shadow(0 0 5px currentColor); }
}
.btn-pulse-icon > .dashicons,
.btn-pulse-icon > svg,
.aura-pulse-icon,
.btn:hover.btn-pulse-hover > .dashicons {
    animation: aura-pulse-beat 1.6s infinite ease-in-out !important;
}

/* Efecto WOW Shimmer (Haz de luz que barre el botón) */
@keyframes aura-btn-shimmer-sweep {
    0%   { transform: translateX(-150%) skewX(-20deg); }
    100% { transform: translateX(280%) skewX(-20deg); }
}
.btn-shimmer {
    position: relative !important;
    overflow: hidden !important;
}
.btn-shimmer::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent) !important;
    transform: translateX(-160%) skewX(-20deg) !important;
    pointer-events: none !important;
}
.btn-shimmer:hover::after,
.btn-shimmer-auto::after {
    animation: aura-btn-shimmer-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* Efecto WOW Lift (Elevación 3D en Hover) */
.btn-lift:hover,
.btn:hover {
    transform: translateY(-2px) !important;
}
.btn-lift:active,
.btn:active {
    transform: translateY(0) !important;
}

/* ── 2. FAMILIAS CROMÁTICAS DE BOTONES WOW ───────────────────────────── */

/* VIOLET (Aura Primario / Acciones Especiales / Plantillas) */
.btn-violet {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}
.btn-violet:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.5) !important;
}
.btn-violet:active {
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
}

/* SECONDARY (Neutral / Controles Auxiliares / Expandir / Colapsar / Cancelar) */
/* MODO CLARO: Fondo blanco nítido, texto gris oscuro #1e293b, borde Slate elegante, sombra suave */
.btn-secondary {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn-secondary > .dashicons,
.btn-secondary > svg {
    color: #475569 !important;
}
.btn-secondary:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}
.btn-secondary:hover > .dashicons,
.btn-secondary:hover > svg {
    color: #0f172a !important;
}
.btn-secondary:active {
    background: #f1f5f9 !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

/* MODO OSCURO: Fondo Dark Slate #1e293b, texto claro #f8fafc, borde sutil #334155 */
[data-theme="dark"] .btn-secondary,
.aura-dark-mode .btn-secondary,
.wp-dark-mode-active .btn-secondary,
body.dark-mode .btn-secondary,
html[data-wp-dark-mode-scheme="dark"] .btn-secondary,
body.admin-color-midnight .btn-secondary {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1.5px solid #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .btn-secondary > .dashicons,
.aura-dark-mode .btn-secondary > .dashicons,
.wp-dark-mode-active .btn-secondary > .dashicons,
body.dark-mode .btn-secondary > .dashicons,
html[data-wp-dark-mode-scheme="dark"] .btn-secondary > .dashicons {
    color: #94a3b8 !important;
}
[data-theme="dark"] .btn-secondary:hover,
.aura-dark-mode .btn-secondary:hover,
.wp-dark-mode-active .btn-secondary:hover,
body.dark-mode .btn-secondary:hover,
html[data-wp-dark-mode-scheme="dark"] .btn-secondary:hover {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .btn-secondary:hover > .dashicons,
.aura-dark-mode .btn-secondary:hover > .dashicons,
.wp-dark-mode-active .btn-secondary:hover > .dashicons {
    color: #ffffff !important;
}

/* PRIMARY (Azul Corporativo / Guardar / Acción Principal) */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.5) !important;
}

/* EMERALD / SUCCESS (Éxito / Guardar Exitoso / Asignar) */
.btn-emerald,
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
.btn-emerald:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.5) !important;
}

/* INDIGO */
.btn-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}
.btn-indigo:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.5) !important;
}

/* CYAN */
.btn-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35) !important;
}
.btn-cyan:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(6, 182, 212, 0.5) !important;
}

/* AMBER / WARNING */
.btn-amber,
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}
.btn-amber:hover,
.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.5) !important;
}

/* ROSE / DANGER */
.btn-rose,
.btn-danger,
.btn-red {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
}
.btn-rose:hover,
.btn-danger:hover,
.btn-red:hover {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(244, 63, 94, 0.5) !important;
}

/* GOLD */
.btn-gold {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    color: #1e1b4b !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4) !important;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(234, 179, 8, 0.55) !important;
}

/* SLATE / NEUTRAL */
.btn-slate {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.3) !important;
}
.btn-slate:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(71, 85, 105, 0.45) !important;
}

/* GLASSMORPHISM */
.btn-glass {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}
.btn-glass > span,
.btn-glass span,
.btn-glass > .dashicons,
.btn-glass .dashicons,
.btn-glass svg {
    color: #1e293b !important;
    fill: #1e293b !important;
}
.btn-glass:hover {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    color: #2563eb !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18) !important;
}
.btn-glass:hover > span,
.btn-glass:hover span,
.btn-glass:hover > .dashicons,
.btn-glass:hover .dashicons {
    color: #2563eb !important;
    fill: #2563eb !important;
}
[data-theme="dark"] .btn-glass,
.aura-dark-mode .btn-glass,
.wp-dark-mode-active .btn-glass,
body.dark-mode .btn-glass,
html[data-wp-dark-mode-scheme="dark"] .btn-glass {
    background: rgba(30, 41, 59, 0.7) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .btn-glass > span,
[data-theme="dark"] .btn-glass span,
[data-theme="dark"] .btn-glass > .dashicons,
[data-theme="dark"] .btn-glass .dashicons,
.aura-dark-mode .btn-glass span,
.aura-dark-mode .btn-glass .dashicons {
    color: #f8fafc !important;
    fill: #f8fafc !important;
}
[data-theme="dark"] .btn-glass:hover,
.aura-dark-mode .btn-glass:hover,
.wp-dark-mode-active .btn-glass:hover,
body.dark-mode .btn-glass:hover,
html[data-wp-dark-mode-scheme="dark"] .btn-glass:hover {
    background: rgba(51, 65, 85, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3) !important;
}
[data-theme="dark"] .btn-glass:hover > span,
[data-theme="dark"] .btn-glass:hover span,
[data-theme="dark"] .btn-glass:hover > .dashicons,
[data-theme="dark"] .btn-glass:hover .dashicons {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 3. Badges universales .badge y .aura-badge (Píldoras Redondeadas) */
.badge,
.aura-badge,
.adp-badge,
.live-chip,
.adp-roadmap__badge,
.aura-tab-badge,
.aura-count-badge,
.aura-area-badge-pill,
.badge-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: var(--r-full, 9999px) !important; /* Esquinas 100% redondeadas */
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Alineación horizontal obligatoria: pulse-dot e iconos SIEMPRE al lado del texto (NUNCA arriba ni abajo) */
.badge > .pulse-dot,
.badge > .dot,
.badge .pulse-dot,
.badge .dot,
.aura-badge > .pulse-dot,
.aura-badge .pulse-dot,
.adp-badge > .pulse-dot,
.adp-badge .pulse-dot,
.live-chip > .pulse-dot,
.live-chip .pulse-dot,
.adp-roadmap__badge > .pulse-dot,
.adp-roadmap__badge .pulse-dot,
.btn > .pulse-dot,
.btn .pulse-dot,
.aura-btn > .pulse-dot,
.aura-btn .pulse-dot,
.tab-btn > .pulse-dot,
.tab-btn .pulse-dot,
.aura-tab-btn > .pulse-dot,
.aura-tab-btn .pulse-dot,
.kpi-change > .pulse-dot,
.kpi-change .pulse-dot {
    display: inline-block !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.badge > .dashicons,
.badge > svg,
.badge .dashicons,
.badge svg,
.aura-badge > .dashicons,
.aura-badge > svg,
.aura-badge .dashicons,
.aura-badge svg,
.adp-badge > .dashicons,
.adp-badge > svg,
.adp-badge .dashicons,
.adp-badge svg,
.live-chip > .dashicons,
.live-chip > svg,
.live-chip .dashicons,
.live-chip svg,
.adp-roadmap__badge > .dashicons,
.adp-roadmap__badge > svg,
.adp-roadmap__badge .dashicons,
.adp-roadmap__badge svg,
.btn > .dashicons,
.btn > svg,
.btn .dashicons,
.btn svg,
.aura-btn > .dashicons,
.aura-btn > svg,
.aura-btn .dashicons,
.aura-btn svg,
.tab-btn > .dashicons,
.tab-btn .dashicons,
.aura-tab-btn > .dashicons,
.aura-tab-btn .dashicons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    vertical-align: middle !important;
}

/* Forzar que el texto que acompaña al icono o pulse-dot permanezca estrictamente en la misma línea */
.badge > span:not(.pulse-dot):not(.dot):not(.dashicons),
.aura-badge > span:not(.pulse-dot):not(.dot):not(.dashicons),
.adp-badge > span:not(.pulse-dot):not(.dot):not(.dashicons),
.adp-roadmap__badge > span:not(.pulse-dot):not(.dot):not(.dashicons),
.live-chip > span:not(.pulse-dot):not(.dot):not(.dashicons),
.btn > span:not(.pulse-dot):not(.dot):not(.dashicons),
.aura-btn > span:not(.pulse-dot):not(.dot):not(.dashicons),
.tab-btn > span:not(.pulse-dot):not(.dot):not(.dashicons),
.aura-tab-btn > span:not(.pulse-dot):not(.dot):not(.dashicons),
.kpi-change > span:not(.pulse-dot):not(.dot):not(.dashicons) {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: inherit !important;
    vertical-align: middle !important;
}

/* Modificadores de tamaño y forma */
.badge-sm, .aura-badge-sm { padding: 2px 8px !important; font-size: 10px !important; }
.badge-lg, .aura-badge-lg { padding: 6px 16px !important; font-size: 13px !important; }
.badge-pill, .aura-badge-pill { border-radius: var(--r-full, 9999px) !important; }

/* Variantes de color Canónicas */
.badge-indigo, .aura-badge-indigo   { background: var(--aura-indigo-bg) !important;  border-color: var(--aura-indigo-border) !important;  color: var(--aura-indigo-dark) !important; }
.badge-violet, .aura-badge-violet,
.badge-purple, .aura-badge-purple   { background: var(--aura-violet-bg) !important;  border-color: var(--aura-violet-border) !important;  color: var(--aura-violet-dark) !important; }
.badge-blue,   .aura-badge-blue     { background: var(--aura-blue-bg) !important;    border-color: var(--aura-blue-border) !important;    color: var(--aura-blue-dark) !important; }
.badge-cyan,   .aura-badge-cyan,
.badge-info,   .aura-badge-info     { background: var(--aura-cyan-bg) !important;    border-color: var(--aura-cyan-border) !important;    color: var(--aura-cyan-dark) !important; }
.badge-emerald,.aura-badge-emerald,
.badge-green,  .aura-badge-green,
.badge-success,.aura-badge-success  { background: var(--aura-emerald-bg) !important; border-color: var(--aura-emerald-border) !important; color: var(--aura-emerald-dark) !important; }
.badge-amber,  .aura-badge-amber,
.badge-yellow, .aura-badge-yellow,
.badge-warning,.aura-badge-warning  { background: var(--aura-amber-bg) !important;   border-color: var(--aura-amber-border) !important;   color: var(--aura-amber-dark) !important; }
.badge-rose,   .aura-badge-rose     { background: var(--aura-rose-bg) !important;    border-color: var(--aura-rose-border) !important;    color: var(--aura-rose-dark) !important; }
.badge-red,    .aura-badge-red,
.badge-danger, .aura-badge-danger   { background: var(--aura-red-bg) !important;     border-color: var(--aura-red-border) !important;     color: var(--aura-red-dark) !important; }
.badge-gold,   .aura-badge-gold     { background: var(--aura-gold-bg) !important;    border-color: var(--aura-gold-border) !important;    color: var(--aura-gold-dark) !important; }
.badge-slate,  .aura-badge-slate,
.badge-gray,   .aura-badge-gray,
.badge-neutral,.aura-badge-neutral  { background: var(--bg-alt) !important;          border-color: var(--border) !important;              color: var(--tx-muted) !important; }

.badge .dashicons,
.aura-badge .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    vertical-align: middle !important;
    color: inherit !important;
}

/* ── Badges sobre fondos oscuros / Cabeceras Hero (.hero-card, .aura-page-header) ── */
.hero-card .badge,
.hero-card .aura-badge,
.aura-page-header .badge,
.aura-page-header .aura-badge {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}
.hero-card .badge .dashicons,
.hero-card .aura-badge .dashicons,
.aura-page-header .badge .dashicons,
.aura-page-header .aura-badge .dashicons {
    color: #ffffff !important;
}

.hero-card .badge.badge-blue,
.hero-card .aura-badge.badge-blue,
.aura-page-header .badge.badge-blue,
.aura-page-header .aura-badge.badge-blue {
    background: rgba(37, 99, 235, 0.32) !important;
    border-color: rgba(147, 197, 253, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-emerald,
.hero-card .badge.badge-green,
.hero-card .badge.badge-success,
.hero-card .aura-badge.badge-emerald,
.aura-page-header .badge.badge-emerald,
.aura-page-header .badge.badge-green,
.aura-page-header .badge.badge-success,
.aura-page-header .aura-badge.badge-emerald {
    background: rgba(16, 185, 129, 0.3) !important;
    border-color: rgba(110, 231, 183, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-indigo,
.hero-card .aura-badge.badge-indigo,
.aura-page-header .badge.badge-indigo,
.aura-page-header .aura-badge.badge-indigo {
    background: rgba(79, 70, 229, 0.32) !important;
    border-color: rgba(165, 180, 252, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-amber,
.hero-card .badge.badge-yellow,
.hero-card .badge.badge-warning,
.hero-card .aura-badge.badge-amber,
.aura-page-header .badge.badge-amber,
.aura-page-header .badge.badge-yellow,
.aura-page-header .badge.badge-warning,
.aura-page-header .aura-badge.badge-amber {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: rgba(253, 230, 138, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-rose,
.hero-card .aura-badge.badge-rose,
.aura-page-header .badge.badge-rose,
.aura-page-header .aura-badge.badge-rose {
    background: rgba(244, 63, 94, 0.3) !important;
    border-color: rgba(253, 164, 175, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-red,
.hero-card .badge.badge-danger,
.hero-card .aura-badge.badge-red,
.aura-page-header .badge.badge-red,
.aura-page-header .badge.badge-danger,
.aura-page-header .aura-badge.badge-red {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(252, 165, 165, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-violet,
.hero-card .badge.badge-purple,
.hero-card .aura-badge.badge-violet,
.aura-page-header .badge.badge-violet,
.aura-page-header .badge.badge-purple,
.aura-page-header .aura-badge.badge-violet {
    background: rgba(139, 92, 246, 0.32) !important;
    border-color: rgba(216, 180, 254, 0.5) !important;
    color: #ffffff !important;
}

.hero-card .badge.badge-cyan,
.hero-card .badge.badge-info,
.hero-card .aura-badge.badge-cyan,
.aura-page-header .badge.badge-cyan,
.aura-page-header .badge.badge-info,
.aura-page-header .aura-badge.badge-cyan {
    background: rgba(6, 182, 212, 0.3) !important;
    border-color: rgba(103, 232, 249, 0.5) !important;
    color: #ffffff !important;
}

/* Soporte Modo Oscuro */
[data-theme="dark"] .badge-indigo,  .aura-dark-mode .badge-indigo,  html[data-wp-dark-mode-scheme="dark"] .badge-indigo,  .wp-dark-mode-active .badge-indigo,
[data-theme="dark"] .aura-badge-indigo, .aura-dark-mode .aura-badge-indigo, html[data-wp-dark-mode-scheme="dark"] .aura-badge-indigo, .wp-dark-mode-active .aura-badge-indigo  { color: var(--aura-indigo-light) !important; }
[data-theme="dark"] .badge-violet,  .aura-dark-mode .badge-violet,  html[data-wp-dark-mode-scheme="dark"] .badge-violet,  .wp-dark-mode-active .badge-violet,
[data-theme="dark"] .badge-purple,  .aura-dark-mode .badge-purple,  html[data-wp-dark-mode-scheme="dark"] .badge-purple,  .wp-dark-mode-active .badge-purple,
[data-theme="dark"] .aura-badge-violet, .aura-dark-mode .aura-badge-violet, html[data-wp-dark-mode-scheme="dark"] .aura-badge-violet, .wp-dark-mode-active .aura-badge-violet  { color: var(--aura-violet-light) !important; }
[data-theme="dark"] .badge-blue,    .aura-dark-mode .badge-blue,    html[data-wp-dark-mode-scheme="dark"] .badge-blue,    .wp-dark-mode-active .badge-blue,
[data-theme="dark"] .aura-badge-blue, .aura-dark-mode .aura-badge-blue, html[data-wp-dark-mode-scheme="dark"] .aura-badge-blue, .wp-dark-mode-active .aura-badge-blue      { color: var(--aura-blue-light) !important; }
[data-theme="dark"] .badge-cyan,    .aura-dark-mode .badge-cyan,    html[data-wp-dark-mode-scheme="dark"] .badge-cyan,    .wp-dark-mode-active .badge-cyan,
[data-theme="dark"] .badge-info,    .aura-dark-mode .badge-info,    html[data-wp-dark-mode-scheme="dark"] .badge-info,    .wp-dark-mode-active .badge-info,
[data-theme="dark"] .aura-badge-cyan, .aura-dark-mode .aura-badge-cyan, html[data-wp-dark-mode-scheme="dark"] .aura-badge-cyan, .wp-dark-mode-active .aura-badge-cyan      { color: var(--aura-cyan-light) !important; }
[data-theme="dark"] .badge-emerald, .aura-dark-mode .badge-emerald, html[data-wp-dark-mode-scheme="dark"] .badge-emerald, .wp-dark-mode-active .badge-emerald,
[data-theme="dark"] .badge-green,   .aura-dark-mode .badge-green,   html[data-wp-dark-mode-scheme="dark"] .badge-green,   .wp-dark-mode-active .badge-green,
[data-theme="dark"] .badge-success, .aura-dark-mode .badge-success, html[data-wp-dark-mode-scheme="dark"] .badge-success, .wp-dark-mode-active .badge-success,
[data-theme="dark"] .aura-badge-green, .aura-dark-mode .aura-badge-green, html[data-wp-dark-mode-scheme="dark"] .aura-badge-green, .wp-dark-mode-active .aura-badge-green    { color: var(--aura-emerald-light) !important; }
[data-theme="dark"] .badge-amber,   .aura-dark-mode .badge-amber,   html[data-wp-dark-mode-scheme="dark"] .badge-amber,   .wp-dark-mode-active .badge-amber,
[data-theme="dark"] .badge-yellow,  .aura-dark-mode .badge-yellow,  html[data-wp-dark-mode-scheme="dark"] .badge-yellow,  .wp-dark-mode-active .badge-yellow,
[data-theme="dark"] .badge-warning, .aura-dark-mode .badge-warning, html[data-wp-dark-mode-scheme="dark"] .badge-warning, .wp-dark-mode-active .badge-warning,
[data-theme="dark"] .aura-badge-yellow, .aura-dark-mode .aura-badge-yellow, html[data-wp-dark-mode-scheme="dark"] .aura-badge-yellow, .wp-dark-mode-active .aura-badge-yellow  { color: var(--aura-amber-light) !important; }
[data-theme="dark"] .badge-rose,    .aura-dark-mode .badge-rose,    html[data-wp-dark-mode-scheme="dark"] .badge-rose,    .wp-dark-mode-active .badge-rose,
[data-theme="dark"] .aura-badge-rose, .aura-dark-mode .aura-badge-rose, html[data-wp-dark-mode-scheme="dark"] .aura-badge-rose, .wp-dark-mode-active .aura-badge-rose      { color: var(--aura-rose-light) !important; }
[data-theme="dark"] .badge-red,     .aura-dark-mode .badge-red,     html[data-wp-dark-mode-scheme="dark"] .badge-red,     .wp-dark-mode-active .badge-red,
[data-theme="dark"] .badge-danger,  .aura-dark-mode .badge-danger,  html[data-wp-dark-mode-scheme="dark"] .badge-danger,  .wp-dark-mode-active .badge-danger,
[data-theme="dark"] .aura-badge-red, .aura-dark-mode .aura-badge-red, html[data-wp-dark-mode-scheme="dark"] .aura-badge-red, .wp-dark-mode-active .aura-badge-red        { color: var(--aura-red-light) !important; }
[data-theme="dark"] .badge-gold,    .aura-dark-mode .badge-gold,    html[data-wp-dark-mode-scheme="dark"] .badge-gold,    .wp-dark-mode-active .badge-gold,
[data-theme="dark"] .aura-badge-gold, .aura-dark-mode .aura-badge-gold, html[data-wp-dark-mode-scheme="dark"] .aura-badge-gold, .wp-dark-mode-active .aura-badge-gold      { color: var(--aura-gold-light) !important; }
[data-theme="dark"] .badge-slate,   .aura-dark-mode .badge-slate,   html[data-wp-dark-mode-scheme="dark"] .badge-slate,   .wp-dark-mode-active .badge-slate,
[data-theme="dark"] .badge-gray,    .aura-dark-mode .badge-gray,    html[data-wp-dark-mode-scheme="dark"] .badge-gray,    .wp-dark-mode-active .badge-gray,
[data-theme="dark"] .badge-neutral, .aura-dark-mode .badge-neutral, html[data-wp-dark-mode-scheme="dark"] .badge-neutral, .wp-dark-mode-active .badge-neutral,
[data-theme="dark"] .aura-badge-gray, .aura-dark-mode .aura-badge-gray, html[data-wp-dark-mode-scheme="dark"] .aura-badge-gray, .wp-dark-mode-active .aura-badge-gray      { color: var(--tx-muted) !important; border-color: var(--border) !important; }

/* 4. Dots universales .dot-{color} */
.dot-indigo  { background-color: var(--aura-indigo); }
.dot-violet  { background-color: var(--aura-violet); }
.dot-blue    { background-color: var(--aura-blue); }
.dot-cyan    { background-color: var(--aura-cyan); }
.dot-emerald { background-color: var(--aura-emerald); }
.dot-amber   { background-color: var(--aura-amber); }
.dot-rose    { background-color: var(--aura-rose); }
.dot-red     { background-color: var(--aura-red); }
.dot-gold    { background-color: var(--aura-gold); }
.dot-slate   { background-color: var(--aura-slate); }

/* ══════════════════════════════════════════════════════════════════════════
   9. EFECTOS HOVER EN TARJETAS (.card-lift, .card-tilt, .card-glow)
   ══════════════════════════════════════════════════════════════════════════ */
.card-lift {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-xl, 18px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
    cursor: default;
}
.card-lift:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 20px 48px rgba(79, 70, 229, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.card-tilt {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-xl, 18px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
    cursor: default;
}
.card-tilt:hover {
    transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.02);
    box-shadow: 0 20px 48px rgba(79, 70, 229, 0.14);
}

.card-glow {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-xl, 18px);
    transition: all 0.3s ease;
}
.card-glow:hover {
    border-color: var(--aura-v300, #c4b5fd) !important;
    box-shadow: 0 0 0 1px var(--aura-v300, #c4b5fd), 0 8px 40px rgba(139, 92, 246, 0.25) !important;
    transform: translateY(-4px);
}

/* ══════════════════════════════════════════════════════════════════════════
   12. NEUMORFISMO (SOFT UI) — ELEVADO, HUNDIDO Y BOTONES
   ══════════════════════════════════════════════════════════════════════════ */
.neumorph {
    background: var(--neu-bg, #f0f4ff);
    border-radius: var(--r-xl, 18px);
    box-shadow: var(--neu-shadow-out, 8px 8px 20px rgba(174, 174, 210, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.85));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.neumorph:hover {
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.12), -5px -5px 14px rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .neumorph:hover,
.aura-dark-mode .neumorph:hover,
.wp-dark-mode-active .neumorph:hover,
body.dark-mode .neumorph:hover,
html[data-wp-dark-mode-scheme="dark"] .neumorph:hover {
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.5), -5px -5px 14px rgba(255, 255, 255, 0.03);
}

.neumorph-inset {
    background: var(--neu-bg, #f0f4ff);
    border-radius: var(--r-xl, 18px);
    box-shadow: var(--neu-shadow-in, inset 5px 5px 12px rgba(174, 174, 210, 0.4), inset -5px -5px 12px rgba(255, 255, 255, 0.8));
}

.neumorph-btn {
    background: var(--neu-bg, #f0f4ff);
    border: none;
    border-radius: var(--r-md, 12px);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aura-p600, #4338ca);
    cursor: pointer;
    box-shadow: var(--neu-shadow-out, 8px 8px 20px rgba(174, 174, 210, 0.4), -8px -8px 20px rgba(255, 255, 255, 0.85));
    transition: all 0.25s ease;
    font-family: inherit;
}
.neumorph-btn:hover {
    box-shadow: 3px 3px 8px rgba(174, 174, 210, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.85);
}
.neumorph-btn:active {
    box-shadow: var(--neu-shadow-in);
}
[data-theme="dark"] .neumorph-btn,
.aura-dark-mode .neumorph-btn,
.wp-dark-mode-active .neumorph-btn,
body.dark-mode .neumorph-btn,
html[data-wp-dark-mode-scheme="dark"] .neumorph-btn {
    color: var(--aura-p300, #a5b4fc);
}

/* ══════════════════════════════════════════════════════════════════════════
   13 & 21. COMPONENTE CANÓNICO KPI METRIC CARD (NEUMORFISMO + CARD LIFT + GRADIENT HALO)
   ══════════════════════════════════════════════════════════════════════════ */
.kpi-card {
    position: relative;
    border-radius: var(--r-xl, 18px) !important;
    padding: 24px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: default;

    /* Neumorfismo (Soft UI) base en Modo Claro */
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 8px 8px 20px rgba(174, 174, 210, 0.25), -6px -6px 16px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.03);

    /* 9. Efecto Hover Elevación Suave (.card-lift) */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
}

/* 13. Halo radial luminoso de gradiente decorativo en la esquina superior derecha */
.kpi-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--kpi-glow, rgba(79, 70, 229, 0.22)) 0%, transparent 70%);
    opacity: 0.75;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Elevación hover (.card-lift) reactiva con el halo */
.kpi-card:hover,
.kpi-card.card-lift:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 20px 40px -10px var(--kpi-glow, rgba(0, 0, 0, 0.16)), 0 6px 16px -4px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--kpi-accent, var(--aura-indigo)) !important;
}
.kpi-card:hover::before,
.kpi-card.card-lift:hover::before {
    transform: scale(1.4);
    opacity: 1;
}

/* 12. Contenedor de Icono Neumórfico (Soft UI) */
.kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    background: var(--kpi-icon-bg, #f1f5f9);
    color: var(--kpi-accent, var(--aura-indigo));
    box-shadow: 4px 4px 10px rgba(174, 174, 210, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.kpi-card:hover .kpi-icon,
.kpi-card.card-lift:hover .kpi-icon {
    transform: scale(1.12);
    box-shadow: 6px 6px 14px rgba(174, 174, 210, 0.4), -4px -4px 10px rgba(255, 255, 255, 1);
}
.kpi-card .kpi-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: inherit;
}

/* Valor numérico grande, limpio y contrastado */
.kpi-card .kpi-value {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--tx-primary, #0f172a) !important;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

/* Etiqueta de métrica */
.kpi-card .kpi-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tx-secondary, #475569) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

/* Subtítulo / Cambio con Pulse Dot */
.kpi-card .kpi-change {
    margin-top: 12px;
    font-size: 0.80rem;
    font-weight: 600;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--kpi-accent, var(--tx-muted, #64748b)) !important;
    position: relative;
    z-index: 1;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   21. PALETA CROMÁTICA OFICIAL (MODO CLARO Y MODO OSCURO)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. EMERALD (Activos / Éxito / CBAC) */
.kpi-card.kpi-emerald,
.kpi-card.kpi-green {
    --kpi-accent: var(--aura-emerald, #10b981);
    --kpi-glow: var(--aura-emerald-glow, rgba(16, 185, 129, 0.35));
    --kpi-icon-bg: var(--aura-emerald-bg, #ecfdf5);
    background: linear-gradient(145deg, #ffffff 0%, rgba(236, 253, 245, 0.6) 100%) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}
.kpi-card.kpi-emerald .kpi-icon,
.kpi-card.kpi-green .kpi-icon {
    background: var(--aura-emerald-bg, #ecfdf5) !important;
    color: var(--aura-emerald, #10b981) !important;
}

/* 2. AMBER (Pendientes / En Espera / Disponibles) */
.kpi-card.kpi-amber,
.kpi-card.kpi-yellow {
    --kpi-accent: var(--aura-amber, #f59e0b);
    --kpi-glow: var(--aura-amber-glow, rgba(245, 158, 11, 0.35));
    --kpi-icon-bg: var(--aura-amber-bg, #fffbeb);
    background: linear-gradient(145deg, #ffffff 0%, rgba(254, 243, 199, 0.6) 100%) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}
.kpi-card.kpi-amber .kpi-icon,
.kpi-card.kpi-yellow .kpi-icon {
    background: var(--aura-amber-bg, #fffbeb) !important;
    color: var(--aura-amber, #f59e0b) !important;
}

/* 3. BLUE (Operativo / Corporativo / Áreas) */
.kpi-card.kpi-blue {
    --kpi-accent: var(--aura-blue, #2563eb);
    --kpi-glow: var(--aura-blue-glow, rgba(37, 99, 235, 0.35));
    --kpi-icon-bg: var(--aura-blue-bg, #eff6ff);
    background: linear-gradient(145deg, #ffffff 0%, rgba(239, 246, 255, 0.6) 100%) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
}
.kpi-card.kpi-blue .kpi-icon {
    background: var(--aura-blue-bg, #eff6ff) !important;
    color: var(--aura-blue, #2563eb) !important;
}

/* 4. VIOLET (Perfiles Predefinidos / Roles / Creativo) */
.kpi-card.kpi-violet,
.kpi-card.kpi-purple {
    --kpi-accent: var(--aura-violet, #8b5cf6);
    --kpi-glow: var(--aura-violet-glow, rgba(139, 92, 246, 0.35));
    --kpi-icon-bg: var(--aura-violet-bg, #f5f3ff);
    background: linear-gradient(145deg, #ffffff 0%, rgba(245, 243, 255, 0.6) 100%) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
}
.kpi-card.kpi-violet .kpi-icon,
.kpi-card.kpi-purple .kpi-icon {
    background: var(--aura-violet-bg, #f5f3ff) !important;
    color: var(--aura-violet, #8b5cf6) !important;
}

/* 5. INDIGO (Brand Principal / Core) */
.kpi-card.kpi-indigo {
    --kpi-accent: var(--aura-indigo, #4f46e5);
    --kpi-glow: var(--aura-indigo-glow, rgba(79, 70, 229, 0.35));
    --kpi-icon-bg: var(--aura-indigo-bg, #eef2ff);
    background: linear-gradient(145deg, #ffffff 0%, rgba(238, 242, 255, 0.6) 100%) !important;
    border-color: rgba(79, 70, 229, 0.28) !important;
}
.kpi-card.kpi-indigo .kpi-icon {
    background: var(--aura-indigo-bg, #eef2ff) !important;
    color: var(--aura-indigo, #4f46e5) !important;
}

/* 6. CYAN (Tecnología / Conectividad) */
.kpi-card.kpi-cyan {
    --kpi-accent: var(--aura-cyan, #06b6d4);
    --kpi-glow: var(--aura-cyan-glow, rgba(6, 182, 212, 0.35));
    --kpi-icon-bg: var(--aura-cyan-bg, #ecfeff);
    background: linear-gradient(145deg, #ffffff 0%, rgba(236, 254, 255, 0.6) 100%) !important;
    border-color: rgba(6, 182, 212, 0.28) !important;
}
.kpi-card.kpi-cyan .kpi-icon {
    background: var(--aura-cyan-bg, #ecfeff) !important;
    color: var(--aura-cyan, #06b6d4) !important;
}

/* 7. ROSE & RED (Alertas / Crítico) */
.kpi-card.kpi-rose,
.kpi-card.kpi-red,
.kpi-card.kpi-danger {
    --kpi-accent: var(--aura-rose, #f43f5e);
    --kpi-glow: var(--aura-rose-glow, rgba(244, 63, 94, 0.35));
    --kpi-icon-bg: var(--aura-rose-bg, #fff1f2);
    background: linear-gradient(145deg, #ffffff 0%, rgba(255, 241, 242, 0.6) 100%) !important;
    border-color: rgba(244, 63, 94, 0.28) !important;
}
.kpi-card.kpi-rose .kpi-icon,
.kpi-card.kpi-red .kpi-icon,
.kpi-card.kpi-danger .kpi-icon {
    background: var(--aura-rose-bg, #fff1f2) !important;
    color: var(--aura-rose, #f43f5e) !important;
}

/* ── MODO OSCURO (DARK MODE) COMPLETO Y CANÓNICO ── */
[data-theme="dark"] .kpi-card,
.aura-dark-mode .kpi-card,
.wp-dark-mode-active .kpi-card,
body.dark-mode .kpi-card,
html[data-wp-dark-mode-scheme="dark"] .kpi-card {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.45) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.45), -4px -4px 12px rgba(255, 255, 255, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .kpi-card .kpi-value,
.aura-dark-mode .kpi-card .kpi-value,
.wp-dark-mode-active .kpi-card .kpi-value,
body.dark-mode .kpi-card .kpi-value,
html[data-wp-dark-mode-scheme="dark"] .kpi-card .kpi-value {
    color: #ffffff !important;
}

[data-theme="dark"] .kpi-card .kpi-label,
.aura-dark-mode .kpi-card .kpi-label,
.wp-dark-mode-active .kpi-card .kpi-label,
body.dark-mode .kpi-card .kpi-label,
html[data-wp-dark-mode-scheme="dark"] .kpi-card .kpi-label {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .kpi-card .kpi-icon,
.aura-dark-mode .kpi-card .kpi-icon,
.wp-dark-mode-active .kpi-card .kpi-icon,
body.dark-mode .kpi-card .kpi-icon,
html[data-wp-dark-mode-scheme="dark"] .kpi-card .kpi-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .kpi-card.card-lift:hover,
.aura-dark-mode .kpi-card:hover,
.aura-dark-mode .kpi-card.card-lift:hover,
.wp-dark-mode-active .kpi-card:hover,
.wp-dark-mode-active .kpi-card.card-lift:hover,
html[data-wp-dark-mode-scheme="dark"] .kpi-card:hover,
html[data-wp-dark-mode-scheme="dark"] .kpi-card.card-lift:hover {
    border-color: var(--kpi-accent, var(--aura-indigo)) !important;
    box-shadow: 0 20px 48px -8px var(--kpi-glow, rgba(0, 0, 0, 0.6)), 0 0 20px -2px var(--kpi-glow, rgba(99, 102, 241, 0.3)) !important;
}

/* ── 19h. CLASES UNIVERSALES BOOTSTRAP 5 (PRIMARY, SECONDARY, SUCCESS, DANGER, WARNING, INFO, LIGHT, DARK) ── */
/* 1. KPI Cards Bootstrap 5 */
.kpi-card.kpi-primary,   .kpi-primary   { background: linear-gradient(135deg, #0a58ca 0%, #0d6efd 100%) !important; color: #fff !important; }
.kpi-card.kpi-secondary, .kpi-secondary { background: linear-gradient(135deg, #495057 0%, #6c757d 100%) !important; color: #fff !important; }
.kpi-card.kpi-success,   .kpi-success   { background: linear-gradient(135deg, #146c43 0%, #198754 100%) !important; color: #fff !important; }
.kpi-card.kpi-danger,    .kpi-danger    { background: linear-gradient(135deg, #b02a37 0%, #dc3545 100%) !important; color: #fff !important; }
.kpi-card.kpi-warning,   .kpi-warning   { background: linear-gradient(135deg, #cc9a06 0%, #ffc107 100%) !important; color: #212529 !important; }
.kpi-card.kpi-warning .kpi-label,
.kpi-card.kpi-warning .kpi-value,
.kpi-card.kpi-warning .kpi-change       { color: #212529 !important; }
.kpi-card.kpi-info,      .kpi-info      { background: linear-gradient(135deg, #0aa2c0 0%, #0dcaf0 100%) !important; color: #212529 !important; }
.kpi-card.kpi-info .kpi-label,
.kpi-card.kpi-info .kpi-value,
.kpi-card.kpi-info .kpi-change          { color: #212529 !important; }
.kpi-card.kpi-light,     .kpi-light     { background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%) !important; color: #212529 !important; border: 1px solid var(--aura-bs-light-border) !important; }
.kpi-card.kpi-light .kpi-label,
.kpi-card.kpi-light .kpi-value,
.kpi-card.kpi-light .kpi-change         { color: #212529 !important; }
.kpi-card.kpi-dark,      .kpi-dark      { background: linear-gradient(135deg, #141619 0%, #212529 100%) !important; color: #fff !important; }

/* 2. Botones universales Bootstrap 5 (Alineados al Sistema Global WOW) */
.btn-primary   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; color: #fff !important; }
.btn-primary:hover   { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important; }
/* .btn-secondary se gestiona globalmente en la Sección 19g para contraste perfecto en Claro y Oscuro */
.btn-success   { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; }
.btn-success:hover   { background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; }
.btn-danger    { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; color: #fff !important; }
.btn-danger:hover    { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important; }
.btn-warning   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; }
.btn-warning:hover   { background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; }
.btn-info      { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; color: #fff !important; }
.btn-info:hover      { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important; }
.btn-light     { background: #f8fafc !important; color: #1e293b !important; border: 1.5px solid #cbd5e1 !important; }
.btn-light:hover     { background: #f1f5f9 !important; color: #0f172a !important; border-color: #94a3b8 !important; }
.btn-dark      { background: #1e293b !important; color: #fff !important; }
.btn-dark:hover      { background: #0f172a !important; }

/* 3. Badges universales Bootstrap 5 */
.badge-primary   { background: var(--aura-bs-primary-bg);   border: 1px solid var(--aura-bs-primary-border);   color: var(--aura-bs-primary-dark); }
.badge-secondary { background: var(--aura-bs-secondary-bg); border: 1px solid var(--aura-bs-secondary-border); color: var(--aura-bs-secondary-dark); }
.badge-success   { background: var(--aura-bs-success-bg);   border: 1px solid var(--aura-bs-success-border);   color: var(--aura-bs-success-dark); }
.badge-danger    { background: var(--aura-bs-danger-bg);    border: 1px solid var(--aura-bs-danger-border);    color: var(--aura-bs-danger-dark); }
.badge-warning   { background: var(--aura-bs-warning-bg);   border: 1px solid var(--aura-bs-warning-border);   color: #664d03; }
.badge-info      { background: var(--aura-bs-info-bg);      border: 1px solid var(--aura-bs-info-border);      color: #055160; }
.badge-light     { background: var(--aura-bs-light-bg);     border: 1px solid var(--aura-bs-light-border);     color: #212529; }
.badge-dark      { background: var(--aura-bs-dark-bg);      border: 1px solid var(--aura-bs-dark-border);      color: #f8f9fa; }

[data-theme="dark"] .badge-primary   { color: var(--aura-bs-primary-light); }
[data-theme="dark"] .badge-secondary { color: var(--aura-bs-secondary-light); }
[data-theme="dark"] .badge-success   { color: var(--aura-bs-success-light); }
[data-theme="dark"] .badge-danger    { color: var(--aura-bs-danger-light); }
[data-theme="dark"] .badge-warning   { color: var(--aura-bs-warning-light); }
[data-theme="dark"] .badge-info      { color: var(--aura-bs-info-light); }
[data-theme="dark"] .badge-light     { color: #ffffff; }
[data-theme="dark"] .badge-dark      { color: #dee2e6; }

/* 4. Dots universales Bootstrap 5 */
.dot-primary   { background-color: var(--aura-bs-primary); }
.dot-secondary { background-color: var(--aura-bs-secondary); }
.dot-success   { background-color: var(--aura-bs-success); }
.dot-danger    { background-color: var(--aura-bs-danger); }
.dot-warning   { background-color: var(--aura-bs-warning); }
.dot-info      { background-color: var(--aura-bs-info); }
.dot-light     { background-color: #adb5bd; }
.dot-dark      { background-color: var(--aura-bs-dark); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  20. SUITE DE EFECTOS VISUALES Y COMPONENTES CANÓNICOS       ║
   ║  AURA DESIGN SYSTEM 2.0 — (SHOWROOM & PRODUCTION)            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 20a. BOTONES CON EFECTOS ───────────────────────────────── */
.btn-shimmer { position: relative; overflow: hidden; z-index: 1; }
.btn-shimmer::before {
    content: ''; position: absolute; top: 0; left: -120%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); transition: left .65s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.btn-shimmer:hover::before { left: 140%; }

.btn-glass {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.7);
    color: var(--aura-p700, #3730a3);
    box-shadow: 0 4px 16px rgba(79,70,229,.12);
}
.btn-glass:hover { background: rgba(255,255,255,.8); transform: translateY(-1px); }
[data-theme="dark"] .btn-glass,
.aura-dark-mode .btn-glass {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: var(--aura-p300, #a5b4fc);
}
[data-theme="dark"] .btn-glass:hover,
.aura-dark-mode .btn-glass:hover { background: rgba(255,255,255,.14); }

.btn-gradient-cyan  { background: linear-gradient(135deg,#0284c7,var(--aura-cyan)); color: #fff; box-shadow: 0 4px 14px rgba(6,182,212,.35); }
.btn-gradient-cyan:hover  { box-shadow: 0 6px 20px rgba(6,182,212,.5); transform: translateY(-1px); }
.btn-gradient-green { background: linear-gradient(135deg,#059669,var(--aura-green-l, #34d399)); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.35); }
.btn-gradient-green:hover { box-shadow: 0 6px 20px rgba(16,185,129,.5); transform: translateY(-1px); }
.btn-gradient-amber { background: linear-gradient(135deg,#d97706,var(--aura-amber-l, #fbbf24)); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.35); }
.btn-gradient-amber:hover { box-shadow: 0 6px 20px rgba(245,158,11,.5); transform: translateY(-1px); }
.btn-glow { background: linear-gradient(135deg,var(--aura-v700, #6d28d9),var(--aura-p600, #4338ca)); color: #fff; animation: btnGlow 2.5s ease-in-out infinite; }
@keyframes btnGlow { 0%,100%{ box-shadow: 0 0 8px 0 rgba(139,92,246,.4); } 50%{ box-shadow: 0 0 24px 6px rgba(139,92,246,.7); } }

.btn-outline-gradient {
    background: transparent; border: 2px solid transparent; position: relative;
    color: var(--aura-v700, #6d28d9); padding: 10px 22px;
}
.btn-outline-gradient::before {
    content: ''; position: absolute; inset: -2px;
    background: linear-gradient(135deg,var(--aura-v500, #8b5cf6),var(--aura-cyan));
    border-radius: calc(var(--r-sm, 8px) + 2px); z-index: -1;
}
.btn-outline-gradient::after {
    content: ''; position: absolute; inset: 0; background: var(--bg-surface);
    border-radius: var(--r-sm, 8px); z-index: -1; transition: opacity .2s;
}
.btn-outline-gradient:hover::after { opacity: 0; }
.btn-outline-gradient:hover { color: #fff; }
[data-theme="dark"] .btn-outline-gradient,
.aura-dark-mode .btn-outline-gradient { color: var(--aura-v300, #c4b5fd); }

/* ── 20b. PULSE DOTS & LIVE INDICATORS ──────────────────────── */
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; display: inline-block; flex-shrink: 0; }
.pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background-color: inherit; opacity: .75; animation: dotPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes dotPulse { 0%{ transform: scale(1); opacity: .8; } 60%{ transform: scale(2.4); opacity: 0; } 100%{ transform: scale(2.4); opacity: 0; } }

.dot-online  { background-color: var(--aura-emerald); }
.dot-warning { background-color: var(--aura-amber); }
.dot-danger  { background-color: var(--aura-red); }

.live-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: var(--r-full, 9999px); font-size: 12px; font-weight: 600; border: 1px solid; }
.live-online  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.live-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.live-danger  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.live-primary { background: #f5f3ff; border-color: var(--aura-indigo-border); color: var(--aura-indigo-dark); }
.live-info    { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
[data-theme="dark"] .live-online,  .aura-dark-mode .live-online  { background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.25); color: #34d399; }
[data-theme="dark"] .live-warning, .aura-dark-mode .live-warning { background: rgba(245,158,11,.12); border-color: rgba(251,191,36,.25); color: #fbbf24; }
[data-theme="dark"] .live-danger,  .aura-dark-mode .live-danger  { background: rgba(239,68,68,.12);  border-color: rgba(248,113,113,.25); color: #f87171; }
[data-theme="dark"] .live-primary, .aura-dark-mode .live-primary { background: rgba(139,92,246,.12); border-color: rgba(196,181,253,.25); color: var(--aura-violet-light); }
[data-theme="dark"] .live-info,    .aura-dark-mode .live-info    { background: rgba(6,182,212,.12);  border-color: rgba(165,243,252,.25); color: #67e8f9; }

/* ── 20c. GLOW BORDERS ──────────────────────────────────────── */
.glow-border-card { position: relative; border-radius: var(--r-lg, 16px); background: var(--bg-surface); z-index: 1; padding: 24px; }
.glow-border-card::before {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg,var(--aura-violet),var(--aura-cyan),var(--aura-indigo),var(--aura-emerald));
    background-size: 300% 300%; animation: glowRotate 5s ease infinite;
    border-radius: calc(var(--r-lg, 16px) + 2px); z-index: -1; opacity: .85;
}
@keyframes glowRotate { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }

.glow-border-static {
    position: relative; border-radius: var(--r-lg, 16px); background: var(--bg-surface); z-index: 1; padding: 24px;
    box-shadow: 0 0 0 2px rgba(139,92,246,.4), 0 0 20px rgba(139,92,246,.2);
}
.glow-on-hover { border: 1px solid var(--border); border-radius: var(--r-lg, 16px); background: var(--bg-surface); padding: 24px; transition: box-shadow .25s, border-color .25s; }
.glow-on-hover:hover { border-color: var(--aura-violet-light); box-shadow: 0 0 0 3px rgba(139,92,246,.15), 0 8px 32px rgba(139,92,246,.2); }

/* ── 20d. GLASSMORPHISM & STAT CARDS ────────────────────────── */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--r-lg, 16px);
    box-shadow: var(--sh-md);
    transition: box-shadow .2s, transform .25s;
}
.glass-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }

.glass-dark {
    background: rgba(30,27,75,.65);
    border: 1px solid rgba(139,92,246,.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--r-lg, 16px);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] .glass-dark,
.aura-dark-mode .glass-dark { background: rgba(10,9,30,.7); border-color: rgba(139,92,246,.3); }

.glass-frosted {
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.6);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-radius: var(--r-xl, 24px);
    box-shadow: 0 8px 40px rgba(79,70,229,.12);
}
[data-theme="dark"] .glass-frosted,
.aura-dark-mode .glass-frosted { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }

.stat-glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--r-lg, 16px);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--sh-md);
    transition: all .25s cubic-bezier(.4,0,.2,1);
}
.stat-glass-card:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }

.stat-icon-wrap { width: 52px; height: 52px; border-radius: var(--r-md, 12px); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.stat-icon-primary { background: rgba(99,102,241,.12); color: var(--aura-indigo); }
.stat-icon-green   { background: rgba(16,185,129,.12); color: var(--aura-emerald); }
.stat-icon-amber   { background: rgba(245,158,11,.12); color: var(--aura-amber-dark); }
.stat-icon-cyan    { background: rgba(6,182,212,.12);  color: var(--aura-cyan-dark); }
[data-theme="dark"] .stat-icon-primary, .aura-dark-mode .stat-icon-primary { background: rgba(99,102,241,.18); color: var(--aura-indigo-light); }
[data-theme="dark"] .stat-icon-green,   .aura-dark-mode .stat-icon-green   { background: rgba(16,185,129,.18); color: var(--aura-emerald-light); }
[data-theme="dark"] .stat-icon-amber,   .aura-dark-mode .stat-icon-amber   { background: rgba(245,158,11,.18); color: var(--aura-amber-light); }
[data-theme="dark"] .stat-icon-cyan,    .aura-dark-mode .stat-icon-cyan    { background: rgba(6,182,212,.18);  color: var(--aura-cyan-light); }

/* ── 20e. GRADIENT TEXTS ────────────────────────────────────── */
.text-gradient         { background: linear-gradient(135deg,var(--aura-indigo-dark),var(--aura-violet),#3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-gold    { background: linear-gradient(135deg,#b45309,#f59e0b,#fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-ocean   { background: linear-gradient(135deg,#0369a1,#0ea5e9,#06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-rose    { background: linear-gradient(135deg,#be185d,#f43f5e,#fb7185); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-forest  { background: linear-gradient(135deg,#166534,#22c55e,#86efac); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-fire    { background: linear-gradient(135deg,#c2410c,#f97316,#fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.text-gradient-animated {
    background: linear-gradient(90deg,var(--aura-violet),var(--aura-cyan),var(--aura-indigo-light),var(--aura-violet));
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: textGrad 4s linear infinite;
}
@keyframes textGrad { 0%{ background-position: 0%; } 100%{ background-position: 300%; } }

/* ── 20f. LOADING & PROGRESS BARS ───────────────────────────── */
.loading-bar { height: 3px; width: 100%; background: linear-gradient(90deg,var(--aura-violet),var(--aura-cyan),var(--aura-indigo)); background-size: 200% 100%; animation: loadSlide 1.5s cubic-bezier(.4,0,.2,1) infinite; border-radius: var(--r-full, 9999px); }
@keyframes loadSlide { 0%{ background-position: 0%; } 50%{ background-position: 100%; } 100%{ background-position: 0%; } }
.loading-bar-thick { height: 5px; }
.loading-bar-thin  { height: 2px; }
.loading-bar-green { background: linear-gradient(90deg,#059669,var(--aura-emerald-light),var(--aura-cyan)); }
.loading-bar-amber { background: linear-gradient(90deg,#d97706,var(--aura-amber-light),#f97316); }

.progress-wrap { background: var(--bg-alt); border-radius: var(--r-full, 9999px); height: 8px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill { height: 100%; border-radius: var(--r-full, 9999px); background: linear-gradient(90deg,var(--aura-indigo-hover),var(--aura-violet)); position: relative; overflow: hidden; }
.progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation: progShimmer 1.8s ease-in-out infinite; }
@keyframes progShimmer { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(200%); } }
.progress-fill-green { background: linear-gradient(90deg,#059669,var(--aura-emerald-light)); }
.progress-fill-amber { background: linear-gradient(90deg,#d97706,var(--aura-amber-light)); }
.progress-fill-red   { background: linear-gradient(90deg,#dc2626,var(--aura-red)); }

/* ── 20g. FADE ANIMATIONS ───────────────────────────────────── */
.fade-up    { animation: fadeUp    .4s cubic-bezier(.16,1,.3,1) both; }
.fade-left  { animation: fadeLeft  .4s cubic-bezier(.16,1,.3,1) both; }
.fade-right { animation: fadeRight .4s cubic-bezier(.16,1,.3,1) both; }
.fade-scale { animation: fadeScale .35s cubic-bezier(.34,1.56,.64,1) both; }
.fade-down  { animation: fadeDown  .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeUp   { from{ opacity: 0; transform: translateY(20px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from{ opacity: 0; transform: translateX(-20px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes fadeRight{ from{ opacity: 0; transform: translateX(20px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes fadeScale{ from{ opacity: 0; transform: scale(.9); } to{ opacity: 1; transform: scale(1); } }
@keyframes fadeDown { from{ opacity: 0; transform: translateY(-20px); } to{ opacity: 1; transform: translateY(0); } }
.delay-1{ animation-delay: .1s; } .delay-2{ animation-delay: .2s; } .delay-3{ animation-delay: .3s; } .delay-4{ animation-delay: .4s; } .delay-5{ animation-delay: .5s; }

/* ── 20h. CARD HOVERS ───────────────────────────────────────── */
.card-lift { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg, 16px); padding: 24px; transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.card-lift:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 48px rgba(99,102,241,.16), 0 4px 12px rgba(0,0,0,.06); }
.card-tilt { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg, 16px); padding: 24px; transition: transform .4s ease, box-shadow .4s; transform-style: preserve-3d; }
.card-tilt:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.02); box-shadow: 0 20px 48px rgba(99,102,241,.14); }
.card-glow { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg, 16px); padding: 24px; transition: all .3s; }
.card-glow:hover { border-color: var(--aura-violet-light); box-shadow: 0 0 0 1px var(--aura-violet-light), 0 8px 40px rgba(139,92,246,.25); transform: translateY(-4px); }

/* ── 20i. DIVIDERS & SKELETON LOADERS ───────────────────────── */
.divider-gradient { height: 1px; margin: 8px 0; border: none; background: linear-gradient(90deg, transparent 0%, var(--border) 25%, var(--aura-violet-light) 50%, var(--border) 75%, transparent 100%); }
.divider-thick    { height: 2px; margin: 8px 0; border: none; background: linear-gradient(90deg, transparent, var(--aura-violet), transparent); }
.divider-rainbow  { height: 3px; margin: 8px 0; border: none; background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ef4444); border-radius: var(--r-full, 9999px); }

.skeleton { background: linear-gradient(90deg, var(--skel-from) 25%, var(--skel-via) 37%, var(--skel-from) 63%); background-size: 400% 100%; animation: skelWave 1.4s ease-in-out infinite; border-radius: var(--r-sm, 8px); }
@keyframes skelWave { 0%{ background-position: 100%; } 100%{ background-position: 0%; } }
.skel-line { height: 14px; margin: 6px 0; }
.skel-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skel-title  { height: 20px; width: 60%; }
.skel-btn    { height: 36px; width: 100px; border-radius: var(--r-sm, 8px); }
.skel-img    { height: 180px; border-radius: var(--r-lg, 16px); }

/* ── 20j. NEUMORPHISM & TOOLTIPS ────────────────────────────── */
.neumorph       { background: var(--neu-bg); border-radius: 16px; box-shadow: var(--neu-shadow-out); transition: all .3s; }
.neumorph:hover { box-shadow: 5px 5px 12px rgba(0,0,0,.12), -5px -5px 12px rgba(255,255,255,.6); }
[data-theme="dark"] .neumorph:hover, .aura-dark-mode .neumorph:hover { box-shadow: 5px 5px 12px rgba(0,0,0,.4), -5px -5px 12px rgba(255,255,255,.02); }
.neumorph-inset { background: var(--neu-bg); border-radius: 16px; box-shadow: var(--neu-shadow-in); }
.neumorph-btn { background: var(--neu-bg); border: none; border-radius: 12px; padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--aura-indigo); cursor: pointer; box-shadow: var(--neu-shadow-out); transition: all .25s; font-family: inherit; }
.neumorph-btn:hover { box-shadow: 3px 3px 8px rgba(174,174,210,.4), -3px -3px 8px rgba(255,255,255,.85); }
.neumorph-btn:active { box-shadow: var(--neu-shadow-in); }
[data-theme="dark"] .neumorph-btn, .aura-dark-mode .neumorph-btn { color: var(--aura-indigo-light); }

.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); background: #1e293b; color: #fff; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-sm, 8px); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; z-index: 99; }
.tooltip-wrap::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(6px); border: 5px solid transparent; border-top-color: #1e293b; opacity: 0; transition: opacity .2s, transform .2s; z-index: 99; }
.tooltip-wrap:hover::after  { opacity: 1; transform: translateX(-50%) translateY(0); }
.tooltip-wrap:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.tooltip-violet::after  { background: linear-gradient(135deg,var(--aura-violet-dark),var(--aura-indigo-dark)); }
.tooltip-violet::before { border-top-color: var(--aura-violet-dark); }

/* ── 20k. BADGES & AVATARS ──────────────────────────────────── */
.badge-outline { background: transparent; border: 1.5px solid var(--aura-indigo-border); color: var(--aura-indigo-dark); }
.badge-gradient { background: linear-gradient(135deg,var(--aura-indigo),var(--aura-violet)); color: #fff; padding: 4px 12px; }
.badge-shimmer { background: linear-gradient(90deg,var(--aura-indigo-bg),var(--aura-indigo-border),var(--aura-indigo-bg)); background-size: 200% 100%; color: var(--aura-indigo-dark); animation: badgeShim 2s ease infinite; }
@keyframes badgeShim { 0%{ background-position: 0%; } 100%{ background-position: 200%; } }
[data-theme="dark"] .badge-outline, .aura-dark-mode .badge-outline { border-color: rgba(139,92,246,.4); color: var(--aura-violet-light); }
[data-theme="dark"] .badge-shimmer, .aura-dark-mode .badge-shimmer { background: linear-gradient(90deg,rgba(99,102,241,.2),rgba(139,92,246,.3),rgba(99,102,241,.2)); background-size: 200% 100%; color: var(--aura-indigo-light); }

.avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-xs { width: 26px; height: 26px; min-width: 26px; max-width: 26px; min-height: 26px; max-height: 26px; font-size: 11px; }
.avatar-lg { width: 60px; height: 60px; font-size: 22px; }
.avatar-primary { background: linear-gradient(135deg,var(--aura-indigo),var(--aura-violet)); color: #fff; }
.avatar-green   { background: linear-gradient(135deg,#059669,#10b981); color: #fff; }
.avatar-amber   { background: linear-gradient(135deg,#d97706,#f59e0b); color: #fff; }
.avatar-rose    { background: linear-gradient(135deg,#be185d,#f43f5e); color: #fff; }
.avatar-cyan    { background: linear-gradient(135deg,#0891b2,#06b6d4); color: #fff; }
.avatar-glass   { background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid var(--glass-border); box-shadow: var(--sh-sm); }
.avatar-stack   { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--bg-surface); margin-left: -10px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-ring { position: relative; }
.avatar-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: linear-gradient(135deg,var(--aura-violet),var(--aura-cyan)); z-index: -1; animation: ringPulse 2s ease-in-out infinite; }
@keyframes ringPulse { 0%,100%{ opacity: .7; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.05); } }

/* ── 20l. ALERTAS Y MENSAJES DEL SISTEMA ────────────────────── */
.alert-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--r-md, 12px); border-left: 4px solid; font-size: 13.5px; animation: alertIn .35s cubic-bezier(.16,1,.3,1); }
@keyframes alertIn { from{ opacity: 0; transform: translateX(-12px); } to{ opacity: 1; transform: translateX(0); } }
.alert-success { background: #ecfdf5; border-color: var(--aura-emerald); color: #065f46; }
.alert-warning { background: #fffbeb; border-color: var(--aura-amber); color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: var(--aura-red); color: #991b1b; }
.alert-info    { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }
.alert-primary { background: var(--aura-indigo-bg); border-color: var(--aura-indigo); color: var(--aura-indigo-dark); }
[data-theme="dark"] .alert-success, .aura-dark-mode .alert-success { background: rgba(16,185,129,.1); color: #4ade80; }
[data-theme="dark"] .alert-warning, .aura-dark-mode .alert-warning { background: rgba(245,158,11,.1);  color: #fcd34d; }
[data-theme="dark"] .alert-danger,  .aura-dark-mode .alert-danger  { background: rgba(239,68,68,.1);   color: #f87171; }
[data-theme="dark"] .alert-info,    .aura-dark-mode .alert-info    { background: rgba(59,130,246,.1);  color: #93c5fd; }
[data-theme="dark"] .alert-primary, .aura-dark-mode .alert-primary { background: rgba(99,102,241,.1);  color: var(--aura-indigo-light); }
.alert-icon  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 700; margin-bottom: 2px; }

/* ── 20m. INPUTS, SELECTS Y FORMULARIOS MODERNOS ────────────── */
.input-fancy,
.select-fancy {
    width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--r-sm, 8px);
    font-size: 14px; font-family: inherit; color: var(--tx-primary); background: var(--bg-surface); outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-fancy:focus,
.select-fancy:focus { border-color: var(--aura-violet); box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.input-fancy::placeholder { color: var(--tx-muted); }

.input-glass {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--glass-border); border-radius: var(--r-sm, 8px);
    font-size: 14px; font-family: inherit; color: var(--tx-primary); background: var(--glass-bg);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); outline: none; transition: all .2s;
}
.input-glass:focus { border-color: var(--aura-violet-light); box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.input-glass::placeholder { color: var(--tx-muted); }

.input-wrap { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tx-muted); font-size: 15px; pointer-events: none; }
.input-wrap .input-fancy { padding-left: 38px; }

/* ── 20n. TOGGLE SWITCH & NAVEGACIÓN TABS ───────────────────── */
.toggle-wrap  { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle       { width: 44px; height: 24px; border-radius: var(--r-full, 9999px); background: var(--border); position: relative; transition: background .25s; flex-shrink: 0; cursor: pointer; }
.toggle::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.toggle.on    { background: linear-gradient(135deg,var(--aura-indigo),var(--aura-violet)); }
.toggle.on::after { transform: translateX(20px); }
.toggle-label { font-size: 13.5px; font-weight: 500; color: var(--tx-secondary); user-select: none; }

.tabs-bar { display: flex; gap: 4px; background: var(--bg-alt); border-radius: var(--r-md, 12px); padding: 4px; border: 1px solid var(--border); overflow-x: auto; }
.tab-btn  { flex-shrink: 0; padding: 8px 16px; border-radius: var(--r-sm, 8px); font-size: 13px; font-weight: 600; color: var(--tx-muted); cursor: pointer; border: none; background: transparent; transition: all .2s; font-family: inherit; }
.tab-btn:hover  { background: var(--bg-surface); color: var(--aura-indigo); box-shadow: var(--sh-sm); }
.tab-btn.active { background: linear-gradient(135deg,var(--aura-indigo),var(--aura-violet)); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.3); }

/* ── 20o. DASHBOARD CARDS & HERO SURFACES ───────────────────── */
.mini-dash-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r-lg, 16px); padding: 20px; transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.mini-dash-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, linear-gradient(90deg,var(--aura-indigo),var(--aura-violet))); }
.mini-dash-card:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.mini-dash-card.accent-green,
.mini-dash-card.accent-emerald { --card-accent: linear-gradient(90deg,#059669,#10b981); }
.mini-dash-card.accent-amber   { --card-accent: linear-gradient(90deg,#d97706,#f59e0b); }
.mini-dash-card.accent-orange  { --card-accent: linear-gradient(90deg,#ea580c,#f97316); }
.mini-dash-card.accent-red     { --card-accent: linear-gradient(90deg,#dc2626,#ef4444); }
.mini-dash-card.accent-cyan    { --card-accent: linear-gradient(90deg,#0891b2,#06b6d4); }
.mini-dash-card.accent-violet  { --card-accent: linear-gradient(90deg,#5b21b6,#8b5cf6); }
.mini-dash-card.accent-blue    { --card-accent: linear-gradient(90deg,#1d4ed8,#3b82f6); }
.mini-dash-card.accent-rose    { --card-accent: linear-gradient(90deg,#be185d,#f43f5e); }
.mini-dash-card.accent-indigo  { --card-accent: linear-gradient(90deg,#4338ca,#6366f1); }

.hero-card { 
    background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4c1d95 100%); 
    border-radius: var(--r-xl, 24px); 
    padding: 32px; 
    color: #fff; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 20px 60px rgba(30,27,75,.4); 
}
.hero-card::before { 
    content: ''; 
    position: absolute; 
    top: -40px; 
    right: -40px; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    background: radial-gradient(circle,rgba(139,92,246,.5) 0%,transparent 70%); 
    pointer-events: none !important; 
    z-index: 0 !important; 
}
.hero-card::after  { 
    content: ''; 
    position: absolute; 
    bottom: -60px; 
    left: -30px; 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    background: radial-gradient(circle,rgba(6,182,212,.3) 0%,transparent 70%); 
    pointer-events: none !important; 
    z-index: 0 !important; 
}

/* Blindaje de elementos hijos en Hero Cards para asegurar que queden por encima de los fondos decorativos */
.hero-card > * {
    position: relative;
    z-index: 1;
}

.hero-card .aura-header-right,
.hero-card .aura-page-header__actions,
.hero-card .aura-page-header-actions,
.aura-page-header .aura-header-right,
.aura-page-header .aura-page-header__actions,
.aura-page-header .aura-page-header-actions {
    position: relative;
    z-index: 10 !important;
}

/* Botones secundarios translúcidos de alto contraste sobre Hero Cards oscuras */
.hero-card .btn-secondary,
.aura-page-header .btn-secondary {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
.hero-card .btn-secondary:hover,
.aura-page-header .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-2px) !important;
}

/* ── 21b. KPI METRIC CARDS COMPACTAS (.kpi-compact, .kpi-card.kpi-compact) ── */
.kpi-card.kpi-compact,
.kpi-card.kpi-sm,
.kpi-card-compact {
    padding: 12px 16px !important;
    border-radius: var(--r-lg, 14px) !important;
    min-height: 80px !important;
}
.kpi-card.kpi-compact .kpi-value,
.kpi-card.kpi-sm .kpi-value,
.kpi-card-compact .kpi-value {
    font-size: 1.55rem !important;
    margin-bottom: 2px !important;
}
.kpi-card.kpi-compact .kpi-label,
.kpi-card.kpi-sm .kpi-label,
.kpi-card-compact .kpi-label {
    font-size: 0.78rem !important;
    gap: 4px !important;
}
.kpi-card.kpi-compact .kpi-icon,
.kpi-card.kpi-sm .kpi-icon,
.kpi-card-compact .kpi-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
}
.kpi-card.kpi-compact .kpi-icon .dashicons,
.kpi-card.kpi-sm .kpi-icon .dashicons,
.kpi-card-compact .kpi-icon .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* ── TOOLTIPS CONTEXTUALES GLOBALES (.aura-help-icon, #aura-global-tooltip) ── */
.aura-help-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
    cursor: help !important;
    vertical-align: middle !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    opacity: 0.85;
}
.aura-help-icon:hover {
    color: #38bdf8 !important;
    transform: scale(1.25) !important;
    opacity: 1;
}

.empty-card { background: var(--bg-surface); border: 2px dashed var(--border); border-radius: var(--r-lg, 16px); padding: 48px 24px; text-align: center; transition: border-color .2s, background .2s; }
.empty-card:hover { border-color: var(--aura-indigo-light); background: rgba(99,102,241,.04); }
[data-theme="dark"] .empty-card:hover, .aura-dark-mode .empty-card:hover { background: rgba(99,102,241,.08); }
.empty-icon { font-size: 48px; margin-bottom: 12px; display: block; animation: floatIcon 3s ease-in-out infinite; }
@keyframes floatIcon { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* ── 20p. COMPOSICIONES AVANZADAS WOW ───────────────────────── */
/* 1. Master VIP Treasury Card */
.wow-vip-card {
    position: relative;
    background: radial-gradient(circle at 100% 0%, rgba(234, 179, 8, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(79, 70, 229, 0.15) 0%, transparent 60%),
                var(--bg-surface);
    border: 1px solid var(--aura-gold-border);
    border-radius: var(--r-xl, 24px);
    padding: 32px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(234, 179, 8, 0.12), var(--sh-md);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wow-vip-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(234, 179, 8, 0.20), var(--sh-xl); }
.wow-vip-card::after {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.7), rgba(99, 102, 241, 0.3), rgba(234, 179, 8, 0.8));
    border-radius: calc(var(--r-xl, 24px) + 2px); z-index: -1; opacity: 0.6;
}

/* Header Canónico de Dashboard WOW VIP */
.aura-dashboard-vip-header {
    margin-bottom: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.aura-dashboard-vip-header .aura-vip-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg, 16px) !important;
    margin: 20px 0 !important;
}
.aura-dashboard-vip-header .aura-vip-stat-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    padding: 10px 14px !important;
    border-radius: var(--r-md, 12px) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.aura-dashboard-vip-header .aura-vip-stat-item:hover {
    background: var(--glass-card-hover, rgba(99, 102, 241, 0.06)) !important;
    transform: translateY(-2px) !important;
}

/* ── Tarjeta de Usuario VIP del Header ───────────────────────── */
.aura-vip-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 14px !important;
    border-radius: var(--r-lg, 16px) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.25s ease !important;
}
.aura-vip-user-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.09) !important;
}
.aura-vip-user-card__greeting {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
}
.aura-vip-user-card__role {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    margin-top: 2px !important;
}

/* ── Badges VIP del Header ───────────────────────────────────── */
.aura-vip-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: var(--r-full, 9999px) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.aura-vip-badge--gold {
    background: #fefce8 !important;
    border: 1px solid rgba(234, 179, 8, 0.45) !important;
    color: #a16207 !important;
    box-shadow: 0 1px 3px rgba(234, 179, 8, 0.1) !important;
}
.aura-vip-badge--indigo {
    background: #eef2ff !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #4338ca !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.1) !important;
}
.aura-vip-badge--cyan {
    background: #ecfeff !important;
    border: 1px solid rgba(6, 182, 212, 0.35) !important;
    color: #0e7490 !important;
    box-shadow: 0 1px 3px rgba(6, 182, 212, 0.1) !important;
}
.aura-vip-badge--rose {
    background: #fff1f2 !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    color: #be123c !important;
    box-shadow: 0 1px 3px rgba(244, 63, 94, 0.1) !important;
}

.aura-vip-live-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px !important;
    border-radius: var(--r-full, 9999px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #ecfdf5 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #065f46 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1) !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════
   REGLAS EXCLUSIVAS DE MODO OSCURO PARA HEADER VIP (DASHBOARD)
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .aura-vip-user-card,
html[data-theme="dark"] .aura-vip-user-card,
body[data-theme="dark"] .aura-vip-user-card,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card,
html.wp-dark-mode-active .aura-vip-user-card,
body.wp-dark-mode-active .aura-vip-user-card,
.wp-dark-mode-active .aura-vip-user-card,
html.aura-dark-mode .aura-vip-user-card,
body.aura-dark-mode .aura-vip-user-card,
.aura-dark-mode .aura-vip-user-card,
body.dark-mode .aura-vip-user-card,
body.admin-color-midnight .aura-vip-user-card,
body.admin-color-coffee .aura-vip-user-card {
    background: rgba(22, 21, 43, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .aura-vip-user-card:hover,
html[data-theme="dark"] .aura-vip-user-card:hover,
body[data-theme="dark"] .aura-vip-user-card:hover,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card:hover,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card:hover,
html.wp-dark-mode-active .aura-vip-user-card:hover,
body.wp-dark-mode-active .aura-vip-user-card:hover,
.wp-dark-mode-active .aura-vip-user-card:hover,
html.aura-dark-mode .aura-vip-user-card:hover,
body.aura-dark-mode .aura-vip-user-card:hover,
.aura-dark-mode .aura-vip-user-card:hover,
body.dark-mode .aura-vip-user-card:hover,
body.admin-color-midnight .aura-vip-user-card:hover,
body.admin-color-coffee .aura-vip-user-card:hover {
    background: rgba(30, 27, 75, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .aura-vip-user-card__greeting,
html[data-theme="dark"] .aura-vip-user-card__greeting,
body[data-theme="dark"] .aura-vip-user-card__greeting,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card__greeting,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-user-card__greeting,
html.wp-dark-mode-active .aura-vip-user-card__greeting,
body.wp-dark-mode-active .aura-vip-user-card__greeting,
.wp-dark-mode-active .aura-vip-user-card__greeting,
html.aura-dark-mode .aura-vip-user-card__greeting,
body.aura-dark-mode .aura-vip-user-card__greeting,
.aura-dark-mode .aura-vip-user-card__greeting,
body.dark-mode .aura-vip-user-card__greeting,
body.admin-color-midnight .aura-vip-user-card__greeting,
body.admin-color-coffee .aura-vip-user-card__greeting {
    color: #f8fafc !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .aura-vip-badge--gold,
html[data-theme="dark"] .aura-vip-badge--gold,
body[data-theme="dark"] .aura-vip-badge--gold,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--gold,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--gold,
html.wp-dark-mode-active .aura-vip-badge--gold,
body.wp-dark-mode-active .aura-vip-badge--gold,
.wp-dark-mode-active .aura-vip-badge--gold,
html.aura-dark-mode .aura-vip-badge--gold,
body.aura-dark-mode .aura-vip-badge--gold,
.aura-dark-mode .aura-vip-badge--gold,
body.dark-mode .aura-vip-badge--gold,
body.admin-color-midnight .aura-vip-badge--gold,
body.admin-color-coffee .aura-vip-badge--gold {
    background: rgba(234, 179, 8, 0.16) !important;
    border: 1px solid rgba(234, 179, 8, 0.45) !important;
    color: #fef08a !important;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.15) !important;
}

[data-theme="dark"] .aura-vip-live-chip,
html[data-theme="dark"] .aura-vip-live-chip,
body[data-theme="dark"] .aura-vip-live-chip,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-live-chip,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-live-chip,
html.wp-dark-mode-active .aura-vip-live-chip,
body.wp-dark-mode-active .aura-vip-live-chip,
.wp-dark-mode-active .aura-vip-live-chip,
html.aura-dark-mode .aura-vip-live-chip,
body.aura-dark-mode .aura-vip-live-chip,
.aura-dark-mode .aura-vip-live-chip,
body.dark-mode .aura-vip-live-chip,
body.admin-color-midnight .aura-vip-live-chip,
body.admin-color-coffee .aura-vip-live-chip {
    background: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .aura-vip-badge--indigo,
html[data-theme="dark"] .aura-vip-badge--indigo,
body[data-theme="dark"] .aura-vip-badge--indigo,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--indigo,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--indigo,
html.wp-dark-mode-active .aura-vip-badge--indigo,
body.wp-dark-mode-active .aura-vip-badge--indigo,
.wp-dark-mode-active .aura-vip-badge--indigo,
html.aura-dark-mode .aura-vip-badge--indigo,
body.aura-dark-mode .aura-vip-badge--indigo,
.aura-dark-mode .aura-vip-badge--indigo,
body.dark-mode .aura-vip-badge--indigo,
body.admin-color-midnight .aura-vip-badge--indigo,
body.admin-color-coffee .aura-vip-badge--indigo {
    background: rgba(99, 102, 241, 0.18) !important;
    border: 1px solid rgba(129, 140, 248, 0.45) !important;
    color: #c7d2fe !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .aura-vip-badge--cyan,
html[data-theme="dark"] .aura-vip-badge--cyan,
body[data-theme="dark"] .aura-vip-badge--cyan,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--cyan,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--cyan,
html.wp-dark-mode-active .aura-vip-badge--cyan,
body.wp-dark-mode-active .aura-vip-badge--cyan,
.wp-dark-mode-active .aura-vip-badge--cyan,
html.aura-dark-mode .aura-vip-badge--cyan,
body.aura-dark-mode .aura-vip-badge--cyan,
.aura-dark-mode .aura-vip-badge--cyan,
body.dark-mode .aura-vip-badge--cyan,
body.admin-color-midnight .aura-vip-badge--cyan,
body.admin-color-coffee .aura-vip-badge--cyan {
    background: rgba(6, 182, 212, 0.18) !important;
    border: 1px solid rgba(34, 211, 238, 0.45) !important;
    color: #a5f3fc !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15) !important;
}

[data-theme="dark"] .aura-vip-badge--rose,
html[data-theme="dark"] .aura-vip-badge--rose,
body[data-theme="dark"] .aura-vip-badge--rose,
html[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--rose,
body[data-wp-dark-mode-scheme="dark"] .aura-vip-badge--rose,
html.wp-dark-mode-active .aura-vip-badge--rose,
body.wp-dark-mode-active .aura-vip-badge--rose,
.wp-dark-mode-active .aura-vip-badge--rose,
html.aura-dark-mode .aura-vip-badge--rose,
body.aura-dark-mode .aura-vip-badge--rose,
.aura-dark-mode .aura-vip-badge--rose,
body.dark-mode .aura-vip-badge--rose,
body.admin-color-midnight .aura-vip-badge--rose,
body.admin-color-coffee .aura-vip-badge--rose {
    background: rgba(244, 63, 94, 0.18) !important;
    border: 1px solid rgba(251, 113, 133, 0.45) !important;
    color: #fecdd3 !important;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.15) !important;
}
@media (max-width: 900px) {
    .aura-dashboard-vip-header {
        padding: 20px 16px !important;
    }
    .aura-dashboard-vip-header .aura-vip-header__top-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* 2. Sentinel Node Grid */
.sentinel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.sentinel-node {
    background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: var(--r-md, 12px); padding: 16px;
    transition: all 0.25s ease; position: relative; overflow: hidden;
}
.sentinel-node:hover { transform: translateY(-3px); border-color: var(--node-color, var(--aura-indigo)); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.sentinel-node::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--node-color, var(--aura-indigo)); }

/* 3. Split Financial Matrix */
.split-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 640px) { .split-flow-grid { grid-template-columns: 1fr; } }
.split-flow-card { border-radius: var(--r-lg, 16px); padding: 24px; border: 1px solid; position: relative; overflow: hidden; }
.split-flow-card--income  { background: linear-gradient(145deg, var(--aura-emerald-bg) 0%, var(--bg-surface) 100%); border-color: var(--aura-emerald-border); }
.split-flow-card--expense { background: linear-gradient(145deg, var(--aura-red-bg) 0%, var(--bg-surface) 100%); border-color: var(--aura-red-border); }

/* 4. Mini Kanban Board */
.kanban-board-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
@media(max-width: 900px) { .kanban-board-mini { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 540px) { .kanban-board-mini { grid-template-columns: 1fr; } }
.kanban-col { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md, 12px); padding: 14px; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.kanban-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); padding: 12px; margin-bottom: 10px; box-shadow: var(--sh-sm); transition: transform 0.2s, box-shadow 0.2s; cursor: grab; }
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* 5. Data Grid Empresarial & Auditoría Rápida */
.smart-grid-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl, 24px); overflow: hidden; box-shadow: var(--sh-md); margin-bottom: 24px; }
.smart-grid-toolbar { padding: 18px 24px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.smart-table-wrap { overflow-x: auto; width: 100%; }
.smart-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.smart-table th { background: var(--bg-alt); color: var(--tx-secondary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 20px; border-bottom: 1px solid var(--border); user-select: none; white-space: nowrap; }
.smart-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--tx-primary); transition: background 0.15s ease; }
.smart-table tbody tr:hover td { background: var(--bg-alt); }
.smart-table tbody tr.is-expanded td { background: rgba(37, 99, 235, 0.04); }
.smart-audit-drawer { background: var(--bg-alt); border-left: 4px solid var(--aura-indigo); padding: 18px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; font-size: 12.5px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); }
.smart-pagination { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--border); background: var(--bg-surface); font-size: 12.5px; color: var(--tx-secondary); }

/* 6. Widgets BI & Analítica Visual */
.bi-widgets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.bi-widget-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl, 24px); padding: 22px; box-shadow: var(--sh-sm); transition: all 0.25s ease; position: relative; overflow: hidden; }
.bi-widget-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--widget-accent, var(--aura-indigo)); }
.sparkline-svg { width: 100%; height: 64px; overflow: visible; }
.donut-chart-container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.css-donut-chart {
    width: 120px; height: 120px; min-width: 120px; border-radius: 50%;
    background: conic-gradient(var(--aura-indigo) 0% 38%, var(--aura-cyan) 38% 62%, var(--aura-emerald) 62% 82%, var(--aura-amber) 82% 100%);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.08); position: relative;
}
.css-donut-chart::before { content: ''; width: 84px; height: 84px; background: var(--bg-surface); border-radius: 50%; position: absolute; }
.css-donut-center { position: relative; z-index: 2; text-align: center; }
.timeline-feed { display: flex; flex-direction: column; gap: 16px; position: relative; padding-left: 20px; }
.timeline-feed::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; background: linear-gradient(180deg, var(--aura-indigo), var(--aura-cyan), var(--border)); }
.timeline-item { position: relative; font-size: 13px; }
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--item-color, var(--aura-indigo)); box-shadow: 0 0 0 3px var(--bg-surface), 0 0 8px var(--item-color, var(--aura-indigo)); }

/* 7. Controles de Formulario Enterprise */
.enterprise-forms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
.dropzone-container { border: 2px dashed var(--aura-indigo-border); border-radius: var(--r-lg, 16px); padding: 36px 20px; text-align: center; background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: all 0.2s ease; }
.dropzone-container:hover { border-color: var(--aura-indigo); background: var(--aura-indigo-bg); transform: scale(1.01); }
.stepper-track { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 24px; }
.stepper-track::before { content: ''; position: absolute; top: 50%; left: 30px; right: 30px; height: 3px; background: var(--border); z-index: 1; transform: translateY(-50%); }
.stepper-progress-fill { position: absolute; top: 50%; left: 30px; width: 60%; height: 3px; background: linear-gradient(90deg, var(--aura-indigo), var(--aura-emerald)); z-index: 1; transform: translateY(-50%); transition: width 0.3s ease; }
.stepper-step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-surface); padding: 0 8px; }
.stepper-bubble { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; border: 2px solid var(--border); background: var(--bg-surface); color: var(--tx-muted); transition: all 0.25s ease; }
.stepper-step.completed .stepper-bubble { background: var(--aura-emerald); border-color: var(--aura-emerald); color: #fff; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
.stepper-step.active .stepper-bubble { background: var(--aura-indigo); border-color: var(--aura-indigo); color: #fff; box-shadow: 0 0 16px rgba(79, 70, 229, 0.45); transform: scale(1.1); }

/* 8. Superficies Flotantes & Modales */
.surfaces-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px; }
.floating-surface-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl, 24px); overflow: hidden; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.12), var(--sh-md); position: relative; }

/* ── 20q. FOOTER GLOBAL CANÓNICO (.adp-footer & #wpfooter) ──── */
/* Neutralización del padding-bottom nativo excesivo de WordPress */
body[class*="aura"] #wpbody-content,
body[class*="toplevel_page_aura"] #wpbody-content,
body[class*="finanzas_page"] #wpbody-content,
body[class*="inventario_page"] #wpbody-content,
body[class*="biblioteca_page"] #wpbody-content,
body[class*="estudiantes_page"] #wpbody-content,
body:has(.aura-app-wrapper) #wpbody-content,
body:has(.aura-layout) #wpbody-content {
    padding-bottom: 0 !important;
}

.adp-footer {
    margin-top: 14px;
    padding: 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl, 24px);
    box-shadow: var(--sh-sm);
    text-align: center;
    color: var(--tx-muted);
    font-size: 0.85rem;
    position: relative;
    z-index: 5;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.adp-footer p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.4;
}

.adp-footer-link {
    color: var(--aura-indigo);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.2s ease;
}

.adp-footer-link:hover {
    color: var(--aura-indigo-hover);
    text-decoration: underline;
    transform: translateY(-1px);
}

.adp-footer-link__icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* Modo Oscuro para .adp-footer */
[data-theme="dark"] .adp-footer,
.aura-dark-mode .adp-footer {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--tx-muted);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .adp-footer-link,
.aura-dark-mode .adp-footer-link {
    color: var(--aura-indigo-light);
}

[data-theme="dark"] .adp-footer-link:hover,
.aura-dark-mode .adp-footer-link:hover {
    color: #fff;
}

/* Reset y Estilo Enterprise de #wpfooter en todas las pantallas de Aura */
body[class*="aura"] #wpfooter,
body[class*="toplevel_page_aura"] #wpfooter,
body[class*="finanzas_page"] #wpfooter,
body[class*="inventario_page"] #wpfooter,
body[class*="biblioteca_page"] #wpfooter,
body[class*="estudiantes_page"] #wpfooter,
body:has(.aura-app-wrapper) #wpfooter,
body:has(.aura-layout) #wpfooter {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    clear: both !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 10px 20px !important;
    color: var(--tx-muted) !important;
    font-size: 12.5px !important;
    border-top: 1px solid var(--border) !important;
    background: transparent !important;
    z-index: 10 !important;
}

body[class*="aura"] #wpfooter a,
body[class*="toplevel_page_aura"] #wpfooter a {
    color: var(--aura-indigo) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body[class*="aura"] #wpfooter a:hover,
body[class*="toplevel_page_aura"] #wpfooter a:hover {
    color: var(--aura-indigo-hover) !important;
    text-decoration: underline !important;
}

[data-theme="dark"] #wpfooter,
.aura-dark-mode #wpfooter {
    color: var(--tx-muted) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] #wpfooter a,
.aura-dark-mode #wpfooter a {
    color: var(--aura-indigo-light) !important;
}

/* Evitar footer duplicado si la pantalla ya incluye una tarjeta .adp-footer */
body:has(.adp-footer) #wpfooter {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17. INPUTS, CONTROLES DE FORMULARIO Y TABS (ITEM 17 DESIGN SYSTEM)
   ══════════════════════════════════════════════════════════════════════════ */
.input-fancy {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md, 12px);
    font-size: 14px;
    font-family: inherit;
    color: var(--tx-primary, #0f172a);
    background: var(--bg-surface, #ffffff);
    outline: none;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}

.input-fancy:focus {
    border-color: var(--aura-indigo, #4f46e5) !important;
    box-shadow: 0 0 0 3px var(--aura-indigo-glow, rgba(79, 70, 229, 0.2)) !important;
    background: var(--bg-surface, #ffffff);
}

.input-fancy::placeholder {
    color: var(--tx-muted, #94a3b8);
    opacity: 0.9;
}

.input-glass {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--glass-border, rgba(255, 255, 255, 0.6));
    border-radius: var(--r-md, 12px);
    font-size: 14px;
    font-family: inherit;
    color: var(--tx-primary, #0f172a);
    background: var(--glass-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.input-glass:focus {
    border-color: var(--aura-indigo, #4f46e5);
    box-shadow: 0 0 0 3px var(--aura-indigo-glow, rgba(79, 70, 229, 0.18));
}

.input-glass::placeholder {
    color: var(--tx-muted, #94a3b8);
}

/* Envoltorio con icono integrado fluido */
.input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tx-muted, #94a3b8);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    user-select: none;
}

.input-wrap .input-fancy,
.input-wrap .input-glass {
    padding-left: 42px !important;
}

/* Modo oscuro para Inputs */
[data-theme="dark"] .input-fancy,
.aura-dark-mode .input-fancy,
.wp-dark-mode-active .input-fancy,
body.dark-mode .input-fancy,
html[data-wp-dark-mode-scheme="dark"] .input-fancy {
    background: rgba(22, 21, 43, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .input-fancy:focus,
.aura-dark-mode .input-fancy:focus,
.wp-dark-mode-active .input-fancy:focus,
body.dark-mode .input-fancy:focus,
html[data-wp-dark-mode-scheme="dark"] .input-fancy:focus {
    border-color: var(--aura-indigo-light, #818cf8) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28) !important;
    background: rgba(26, 25, 48, 0.95) !important;
}

[data-theme="dark"] .input-fancy::placeholder,
.aura-dark-mode .input-fancy::placeholder,
.wp-dark-mode-active .input-fancy::placeholder,
body.dark-mode .input-fancy::placeholder,
html[data-wp-dark-mode-scheme="dark"] .input-fancy::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES DE CABECERA Y ENLACES (GLASS Y RETORNO)
   ══════════════════════════════════════════════════════════════════════════ */
.aura-header-right a.btn,
.aura-page-header a.btn {
    text-decoration: none !important;
}

.aura-header-right a.btn:hover,
.aura-page-header a.btn:hover {
    text-decoration: none !important;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-radius: var(--r-md, 12px) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    text-decoration: none !important;
}

[data-theme="dark"] .btn-glass,
.aura-dark-mode .btn-glass,
.wp-dark-mode-active .btn-glass,
body.dark-mode .btn-glass,
html[data-wp-dark-mode-scheme="dark"] .btn-glass {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-glass:hover,
.aura-dark-mode .btn-glass:hover,
.wp-dark-mode-active .btn-glass:hover,
body.dark-mode .btn-glass:hover,
html[data-wp-dark-mode-scheme="dark"] .btn-glass:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   26. MODALES Y SUPERFICIES DE SISTEMA (CLARO Y OSCURO)
   ══════════════════════════════════════════════════════════════════════════ */
.aura-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100050;
    padding: 20px;
    box-sizing: border-box;
}

.aura-modal-overlay.is-active,
.aura-modal-overlay.active,
.aura-modal-overlay[aria-hidden="false"],
.aura-modal-overlay[style*="display: flex"],
.aura-modal-overlay[style*="display: block"] {
    display: flex !important;
}

.aura-modal-container {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--r-xl, 18px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 640px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.aura-modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.aura-modal-header h3 {
    margin: 0 0 4px 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.aura-modal-header p {
    margin: 0 !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.aura-modal-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.aura-modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg);
}

.aura-modal-tabs-wrapper {
    background: var(--bg-alt, #f8fafc);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 10px 20px 0;
}

.aura-modal-tabs {
    display: flex;
    gap: 8px;
}

.aura-modal-tab-btn {
    padding: 10px 18px !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--tx-secondary, #64748b) !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

.aura-modal-tab-btn:hover {
    color: var(--aura-indigo, #4f46e5) !important;
}

.aura-modal-tab-btn.is-active {
    color: var(--aura-indigo, #4f46e5) !important;
    border-bottom-color: var(--aura-indigo, #4f46e5) !important;
    background: transparent !important;
}

.aura-modal-body {
    padding: 22px 24px;
    background: var(--bg-surface, #ffffff);
    color: var(--tx-primary, #0f172a);
}

.aura-wp-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg-surface, #ffffff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--r-md, 12px);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.aura-wp-user-card:hover {
    background: var(--bg-alt, #f8fafc);
    border-color: var(--aura-indigo-light, #818cf8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.aura-wp-user-card.is-selected {
    border-color: var(--aura-indigo, #4f46e5);
    background: var(--aura-indigo-bg, #eef2ff);
    box-shadow: 0 0 0 1px var(--aura-indigo, #4f46e5);
}

.aura-modal-footer {
    padding: 16px 24px;
    background: var(--bg-alt, #f8fafc);
    border-top: 1px solid var(--border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Modo oscuro para Modales */
[data-theme="dark"] .aura-modal-container,
.aura-dark-mode .aura-modal-container,
.wp-dark-mode-active .aura-modal-container,
body.dark-mode .aura-modal-container,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-container {
    background: #16152b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .aura-modal-tabs-wrapper,
.aura-dark-mode .aura-modal-tabs-wrapper,
.wp-dark-mode-active .aura-modal-tabs-wrapper,
body.dark-mode .aura-modal-tabs-wrapper,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-tabs-wrapper {
    background: #111022 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .aura-modal-tab-btn,
.aura-dark-mode .aura-modal-tab-btn,
.wp-dark-mode-active .aura-modal-tab-btn,
body.dark-mode .aura-modal-tab-btn,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-tab-btn {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .aura-modal-tab-btn:hover,
.aura-dark-mode .aura-modal-tab-btn:hover,
.wp-dark-mode-active .aura-modal-tab-btn:hover,
body.dark-mode .aura-modal-tab-btn:hover,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-tab-btn:hover {
    color: var(--aura-indigo-light, #818cf8) !important;
}

[data-theme="dark"] .aura-modal-tab-btn.is-active,
.aura-dark-mode .aura-modal-tab-btn.is-active,
.wp-dark-mode-active .aura-modal-tab-btn.is-active,
body.dark-mode .aura-modal-tab-btn.is-active,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-tab-btn.is-active {
    color: #ffffff !important;
    border-bottom-color: var(--aura-indigo-light, #818cf8) !important;
}

[data-theme="dark"] .aura-modal-body,
.aura-dark-mode .aura-modal-body,
.wp-dark-mode-active .aura-modal-body,
body.dark-mode .aura-modal-body,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-body {
    background: #16152b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .aura-wp-user-card,
.aura-dark-mode .aura-wp-user-card,
.wp-dark-mode-active .aura-wp-user-card,
body.dark-mode .aura-wp-user-card,
html[data-wp-dark-mode-scheme="dark"] .aura-wp-user-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .aura-wp-user-card:hover,
.aura-dark-mode .aura-wp-user-card:hover,
.wp-dark-mode-active .aura-wp-user-card:hover,
body.dark-mode .aura-wp-user-card:hover,
html[data-wp-dark-mode-scheme="dark"] .aura-wp-user-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--aura-indigo-light, #818cf8) !important;
}

[data-theme="dark"] .aura-wp-user-card.is-selected,
.aura-dark-mode .aura-wp-user-card.is-selected,
.wp-dark-mode-active .aura-wp-user-card.is-selected,
body.dark-mode .aura-wp-user-card.is-selected,
html[data-wp-dark-mode-scheme="dark"] .aura-wp-user-card.is-selected {
    background: rgba(79, 70, 229, 0.25) !important;
    border-color: var(--aura-indigo-light, #818cf8) !important;
}

[data-theme="dark"] .aura-modal-footer,
.aura-dark-mode .aura-modal-footer,
.wp-dark-mode-active .aura-modal-footer,
body.dark-mode .aura-modal-footer,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-footer {
    background: #111022 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .aura-modal-footer .btn-secondary,
.aura-dark-mode .aura-modal-footer .btn-secondary,
.wp-dark-mode-active .aura-modal-footer .btn-secondary,
body.dark-mode .aura-modal-footer .btn-secondary,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .aura-modal-footer .btn-secondary:hover,
.aura-dark-mode .aura-modal-footer .btn-secondary:hover,
.wp-dark-mode-active .aura-modal-footer .btn-secondary:hover,
body.dark-mode .aura-modal-footer .btn-secondary:hover,
html[data-wp-dark-mode-scheme="dark"] .aura-modal-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Acciones flotantes integradas a la derecha dentro de .input-wrap */
.input-wrap-actions {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 4 !important;
}

.input-wrap-actions .btn,
.input-wrap-actions .button,
.input-wrap-actions .btn-glass,
.input-wrap-actions .btn-secondary {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    height: auto !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    background: rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: var(--tx-secondary, #475569) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.input-wrap-actions .btn:hover,
.input-wrap-actions .button:hover,
.input-wrap-actions .btn-glass:hover,
.input-wrap-actions .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.12) !important;
    color: var(--tx-primary, #0f172a) !important;
}

[data-theme="dark"] .input-wrap-actions .btn,
[data-theme="dark"] .input-wrap-actions .button,
[data-theme="dark"] .input-wrap-actions .btn-glass,
[data-theme="dark"] .input-wrap-actions .btn-secondary,
.aura-dark-mode .input-wrap-actions .btn,
.aura-dark-mode .input-wrap-actions .button,
.aura-dark-mode .input-wrap-actions .btn-glass,
.aura-dark-mode .input-wrap-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .input-wrap-actions .btn:hover,
[data-theme="dark"] .input-wrap-actions .button:hover,
[data-theme="dark"] .input-wrap-actions .btn-glass:hover,
[data-theme="dark"] .input-wrap-actions .btn-secondary:hover,
.aura-dark-mode .input-wrap-actions .btn:hover,
.aura-dark-mode .input-wrap-actions .button:hover,
.aura-dark-mode .input-wrap-actions .btn-glass:hover,
.aura-dark-mode .input-wrap-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Espaciado reforzado para inputs con emoji del Item 17 */
.input-wrap input,
.input-wrap .input-fancy,
.input-wrap .aura-input-control {
    padding-left: 44px !important;
    font-size: 13.5px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.input-wrap .input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botón 'Volver al Directorio' en la cabecera hero */
.aura-header-right a.btn-glass {
    text-decoration: none !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.aura-header-right a.btn-glass:hover {
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    color: #ffffff !important;
}

/* Pestañas del Modal calibradas */
.aura-modal-tabs-wrapper {
    padding: 12px 24px 0 !important;
    background: var(--bg-surface, #ffffff) !important;
}

.aura-modal-tabs {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
}

.aura-modal-tab-btn {
    padding: 10px 16px !important;
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--tx-muted, #64748b) !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.aura-modal-tab-btn:hover {
    color: var(--aura-blue, #2563eb) !important;
}

.aura-modal-tab-btn.is-active {
    color: var(--aura-blue, #2563eb) !important;
    border-bottom: 2px solid var(--aura-blue, #2563eb) !important;
}

[data-theme="dark"] .aura-modal-tabs-wrapper,
.aura-dark-mode .aura-modal-tabs-wrapper {
    background: #16152b !important;
}

[data-theme="dark"] .aura-modal-tabs,
.aura-dark-mode .aura-modal-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .aura-modal-tab-btn.is-active,
.aura-dark-mode .aura-modal-tab-btn.is-active {
    color: var(--aura-indigo-light, #818cf8) !important;
    border-bottom-color: var(--aura-indigo-light, #818cf8) !important;
}

/* Control de paneles internos de modales */
.aura-modal-tab-panel {
    display: none !important;
}
.aura-modal-tab-panel.is-active {
    display: block !important;
}

/* ==========================================================================
   BOOTSTRAP 5.3 INPUT GROUPS CANÓNICOS (AURA DESIGN SYSTEM)
   Soporte universal para iconos al inicio/final (.input-group-text) y botones
   ========================================================================== */
.input-group,
.aura-input-group {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

.input-group > .form-control,
.input-group > .input-fancy,
.input-group > .aura-input-control,
.input-group > input[type="text"],
.input-group > input[type="search"],
.input-group > input[type="email"],
.input-group > input[type="password"],
.input-group > select,
.aura-input-group > .form-control,
.aura-input-group > .input-fancy,
.aura-input-group > .aura-input-control,
.aura-input-group > input[type="text"],
.aura-input-group > input[type="search"],
.aura-input-group > input[type="email"],
.aura-input-group > input[type="password"],
.aura-input-group > select {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--tx-primary, #0f172a) !important;
    background-color: var(--bg-surface, #ffffff) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin: 0 !important;
}

.input-group-text,
.aura-input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--tx-secondary, #475569) !important;
    text-align: center !important;
    white-space: nowrap !important;
    background-color: var(--bg-alt, #f8fafc) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

/* Ensamble continuo estilo Bootstrap 5.3: Elementos no finales */
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.aura-input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Ensamble continuo estilo Bootstrap 5.3: Elementos no iniciales */
.input-group > :not(:first-child),
.aura-input-group > :not(:first-child) {
    margin-left: -1px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Foco dentro del grupo: se eleva para mostrar el borde continuo */
.input-group > input:focus,
.input-group > select:focus,
.input-group > .form-control:focus,
.input-group > .input-fancy:focus,
.input-group > .aura-input-control:focus,
.aura-input-group > input:focus,
.aura-input-group > select:focus,
.aura-input-group > .form-control:focus,
.aura-input-group > .input-fancy:focus,
.aura-input-group > .aura-input-control:focus {
    z-index: 5 !important;
    border-color: var(--aura-indigo, #4f46e5) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* Botones acoplados dentro de input-group (ej. visibilidad de clave o generar) */
.input-group > .btn,
.input-group > .button,
.aura-input-group > .btn,
.aura-input-group > .button {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    background: var(--bg-alt, #f8fafc) !important;
    color: var(--tx-secondary, #475569) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.input-group > .btn:hover,
.input-group > .button:hover,
.aura-input-group > .btn:hover,
.aura-input-group > .button:hover {
    z-index: 3 !important;
    background: var(--bg-surface-hover, #f1f5f9) !important;
    color: var(--tx-primary, #0f172a) !important;
}

/* ==========================================================================
   MODO OSCURO PARA BOOTSTRAP 5.3 INPUT GROUPS
   ========================================================================== */
[data-theme="dark"] .input-group > input,
[data-theme="dark"] .input-group > select,
[data-theme="dark"] .input-group > .form-control,
[data-theme="dark"] .input-group > .input-fancy,
[data-theme="dark"] .input-group > .aura-input-control,
[data-theme="dark"] .aura-input-group > input,
[data-theme="dark"] .aura-input-group > select,
[data-theme="dark"] .aura-input-group > .form-control,
[data-theme="dark"] .aura-input-group > .input-fancy,
[data-theme="dark"] .aura-input-group > .aura-input-control,
.aura-dark-mode .input-group > input,
.aura-dark-mode .input-group > select,
.aura-dark-mode .input-group > .form-control,
.aura-dark-mode .input-group > .input-fancy,
.aura-dark-mode .input-group > .aura-input-control,
.aura-dark-mode .aura-input-group > input,
.aura-dark-mode .aura-input-group > select,
.aura-dark-mode .aura-input-group > .form-control,
.aura-dark-mode .aura-input-group > .input-fancy,
.aura-dark-mode .aura-input-group > .aura-input-control,
.wp-dark-mode-active .input-group > input,
.wp-dark-mode-active .input-group > select,
.wp-dark-mode-active .input-group > .form-control,
.wp-dark-mode-active .input-group > .input-fancy,
.wp-dark-mode-active .input-group > .aura-input-control,
body.dark-mode .input-group > input,
body.dark-mode .input-group > select,
body.dark-mode .input-group > .form-control,
body.dark-mode .input-group > .input-fancy,
body.dark-mode .input-group > .aura-input-control,
html[data-wp-dark-mode-scheme="dark"] .input-group > input,
html[data-wp-dark-mode-scheme="dark"] .input-group > select,
html[data-wp-dark-mode-scheme="dark"] .input-group > .form-control,
html[data-wp-dark-mode-scheme="dark"] .input-group > .input-fancy,
html[data-wp-dark-mode-scheme="dark"] .input-group > .aura-input-control {
    background-color: #1a1935 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .input-group-text,
[data-theme="dark"] .aura-input-group-text,
.aura-dark-mode .input-group-text,
.aura-dark-mode .aura-input-group-text,
.wp-dark-mode-active .input-group-text,
.wp-dark-mode-active .aura-input-group-text,
body.dark-mode .input-group-text,
body.dark-mode .aura-input-group-text,
html[data-wp-dark-mode-scheme="dark"] .input-group-text,
html[data-wp-dark-mode-scheme="dark"] .aura-input-group-text {
    background-color: #242247 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .input-group > .btn,
[data-theme="dark"] .input-group > .button,
[data-theme="dark"] .aura-input-group > .btn,
[data-theme="dark"] .aura-input-group > .button,
.aura-dark-mode .input-group > .btn,
.aura-dark-mode .input-group > .button,
.aura-dark-mode .aura-input-group > .btn,
.aura-dark-mode .aura-input-group > .button,
.wp-dark-mode-active .input-group > .btn,
.wp-dark-mode-active .input-group > .button,
body.dark-mode .input-group > .btn,
body.dark-mode .input-group > .button,
html[data-wp-dark-mode-scheme="dark"] .input-group > .btn,
html[data-wp-dark-mode-scheme="dark"] .input-group > .button {
    background-color: #242247 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .input-group > .btn:hover,
[data-theme="dark"] .input-group > .button:hover,
[data-theme="dark"] .aura-input-group > .btn:hover,
[data-theme="dark"] .aura-input-group > .button:hover,
.aura-dark-mode .input-group > .btn:hover,
.aura-dark-mode .input-group > .button:hover,
.aura-dark-mode .aura-input-group > .btn:hover,
.aura-dark-mode .aura-input-group > .button:hover,
.wp-dark-mode-active .input-group > .btn:hover,
.wp-dark-mode-active .input-group > .button:hover,
body.dark-mode .input-group > .btn:hover,
body.dark-mode .input-group > .button:hover,
html[data-wp-dark-mode-scheme="dark"] .input-group > .btn:hover,
html[data-wp-dark-mode-scheme="dark"] .input-group > .button:hover {
    background-color: #2e2b58 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   11. MOTOR GLOBAL FLOTANTE DE TOOLTIPS (#aura-global-tooltip)
       Y TARJETAS ENRIQUECIDAS (.aura-tip-card)
   ========================================================================== */
#aura-global-tooltip,
.aura-global-tooltip {
    position: fixed !important;
    z-index: 9999999999 !important;
    display: none;
    pointer-events: none !important;
    max-width: 380px;
    width: max-content;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    box-shadow: 0 20px 45px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #334155 !important;
    opacity: 0;
    transform: scale(0.96) translateY(2px);
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    will-change: transform, opacity;
}

#aura-global-tooltip.is-visible,
.aura-global-tooltip.is-visible {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

/* Tooltip con contenido tipo tarjeta (HTML enriquecido) */
#aura-global-tooltip.has-card-content,
.aura-global-tooltip.has-card-content {
    padding: 0 !important;
    max-width: 380px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
}

#aura-global-tooltip.has-card-content .aura-global-tooltip-inner,
.aura-global-tooltip.has-card-content .aura-global-tooltip-inner {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 380px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

#aura-global-tooltip.has-card-content .aura-global-tooltip-arrow,
.aura-global-tooltip.has-card-content .aura-global-tooltip-arrow {
    display: none !important;
}

/* Flechas direccionales */
.aura-global-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
}

#aura-global-tooltip.is-top .aura-global-tooltip-arrow,
.aura-global-tooltip.is-top .aura-global-tooltip-arrow {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-color: #0f172a transparent transparent transparent;
}

#aura-global-tooltip.is-bottom .aura-global-tooltip-arrow,
.aura-global-tooltip.is-bottom .aura-global-tooltip-arrow {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #0f172a transparent;
}

/* Estructura Interna de la Tarjeta Enriquecida (.aura-tip-card) */
.aura-tip-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #f8fafc;
    background: #0f172a;
    border-radius: 14px;
    overflow: hidden;
    font-family: inherit;
}

.aura-tip-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid #334155;
}

.aura-tip-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #1e293b;
    border: 1px solid #334155;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.aura-tip-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aura-tip-info {
    flex: 1 1 auto;
    min-width: 0;
}

.aura-tip-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    word-break: break-word;
}

.aura-tip-subtitle {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    font-family: monospace;
}

.aura-tip-badges {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

.aura-tip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
}

.aura-tip-badge--company {
    background: rgba(37, 99, 235, 0.25);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.aura-tip-badge--role {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.aura-tip-card-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    background: #0f172a;
}

.aura-tip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
}

.aura-tip-row span {
    color: #94a3b8;
    font-size: 11px;
}

.aura-tip-row strong {
    color: #ffffff;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ==========================================================================
   12. PREVISUALIZACIÓN Y ZOOM HD DE IMÁGENES / LOGOS / AVATARES
       (.aura-floating-img-card & .avatar-zoomable)
   ========================================================================== */
.aura-table-thumb-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aura-table-thumb-preview,
.aura-img-preview-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    user-select: none;
    touch-action: manipulation;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-alt, #f8fafc);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.aura-table-thumb-preview img,
.aura-img-preview-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.aura-table-thumb-preview:hover,
.aura-img-preview-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

/* Tarjeta Flotante HD Ampliada (.aura-floating-img-card) */
.aura-floating-img-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #0f172a;
    border-radius: 14px;
    text-align: center;
    max-width: 260px;
    border: 1px solid #334155;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.55);
}

.aura-floating-img-card img {
    max-width: 200px !important;
    max-height: 200px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    padding: 8px !important;
    box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.6) !important;
    display: block !important;
}

.aura-floating-img-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    max-width: 220px !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

.aura-floating-img-sub {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
}

/* Avatar Zoomable Universal (.avatar-zoomable / .avatar-hover-zoom) */
.avatar-zoomable,
.avatar-hover-zoom,
.aura-avatar-zoom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    cursor: zoom-in !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
    will-change: transform;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: var(--avatar-size, 32px);
    height: var(--avatar-size, 32px);
    max-width: var(--avatar-size, 32px);
    max-height: var(--avatar-size, 32px);
}

.avatar-zoomable:hover,
.avatar-hover-zoom:hover,
.aura-avatar-zoom:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 10 !important;
}

.avatar-zoomable img,
.avatar-hover-zoom img,
.aura-avatar-zoom img,
.avatar img,
.aura-responsible-avatar-wrap img,
img.adp-user-avatar {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

/* ==========================================================================
   13. EFECTOS VISUALES PREESTABLECIDOS PARA MIGRACIÓN DE PANTALLAS
   ========================================================================== */

/* A. Semáforos de Estado y Vencimiento (.status-traffic-light) */
.status-traffic-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.traffic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.traffic-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0.4;
    animation: trafficPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes trafficPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.6); opacity: 0; }
}

.traffic-dot-success { background: #10b981; }
.traffic-dot-success::after { background: #10b981; }
.traffic-dot-warning { background: #f59e0b; }
.traffic-dot-warning::after { background: #f59e0b; }
.traffic-dot-danger { background: #ef4444; }
.traffic-dot-danger::after { background: #ef4444; }

.badge-traffic-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 700 !important;
}

.badge-traffic-warning {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 600 !important;
}

.badge-traffic-success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    font-weight: 600 !important;
}

/* B. Micro-barras de Progreso Porcentual (.micro-progress-bar) */
.micro-progress-bar {
    width: 100%;
    max-width: 120px;
    height: 4px;
    background: var(--border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
    display: inline-block;
}

.micro-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.micro-progress-fill--emerald { background: linear-gradient(90deg, #10b981, #059669); }
.micro-progress-fill--amber { background: linear-gradient(90deg, #f59e0b, #d97706); }
.micro-progress-fill--rose { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* C. Badges Interactivos de Comprobantes y Adjuntos (.badge-evidence) */
.badge-evidence,
.btn-evidence {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    background: var(--aura-blue-bg, #eff6ff) !important;
    color: var(--aura-blue, #2563eb) !important;
    border: 1px solid var(--aura-blue-border, #bfdbfe) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.badge-evidence:hover,
.btn-evidence:hover {
    background: var(--aura-blue, #2563eb) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;
}

/* D. Indicador de Pulso Latente (.pulse-indicator / .badge-pulse) */
.pulse-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aura-emerald, #10b981);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: auraPulseIndicator 1.8s infinite;
}

@keyframes auraPulseIndicator {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.badge-pulse {
    position: relative;
    padding-left: 18px !important;
}

.badge-pulse::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: auraPulseIndicator 1.8s infinite;
}

/* E. Elevación Flotante en Hover de Filas de Tabla (.table-row-hover-lift) */
.table-row-hover-lift tbody tr,
table.aura-table-hover tbody tr {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.table-row-hover-lift tbody tr:hover,
table.aura-table-hover tbody tr:hover {
    background-color: var(--aura-surface-hover, #f1f5f9) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 3;
}

/* F. Borde Gradiente Luminoso (.card-gradient-border / .border-glow) */
.card-gradient-border {
    position: relative;
    background: var(--bg-surface, #ffffff);
    border-radius: var(--r-md, 12px);
    border: 1px solid transparent;
    background-clip: padding-box;
}

.card-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--aura-indigo, #4f46e5), var(--aura-violet, #8b5cf6), var(--aura-cyan, #06b6d4));
    z-index: -1;
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

.card-gradient-border:hover::before {
    opacity: 1;
}

/* G. Animación de Entrada Escalonada (.stagger-fade-in) */
.stagger-fade-in > * {
    opacity: 0;
    animation: auraFadeSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.03s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.06s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.09s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.12s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.15s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.18s; }

@keyframes auraFadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   14. MODO OSCURO PARA TOOLTIPS, ZOOM HD Y EFECTOS PREESTABLECIDOS
   ========================================================================== */
[data-theme="dark"] .badge-traffic-danger,
.aura-dark-mode .badge-traffic-danger,
.wp-dark-mode-active .badge-traffic-danger,
body.dark-mode .badge-traffic-danger,
html[data-wp-dark-mode-scheme="dark"] .badge-traffic-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .badge-traffic-warning,
.aura-dark-mode .badge-traffic-warning,
.wp-dark-mode-active .badge-traffic-warning,
body.dark-mode .badge-traffic-warning,
html[data-wp-dark-mode-scheme="dark"] .badge-traffic-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fde68a !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .badge-traffic-success,
.aura-dark-mode .badge-traffic-success,
.wp-dark-mode-active .badge-traffic-success,
body.dark-mode .badge-traffic-success,
html[data-wp-dark-mode-scheme="dark"] .badge-traffic-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .badge-evidence,
[data-theme="dark"] .btn-evidence,
.aura-dark-mode .badge-evidence,
.aura-dark-mode .btn-evidence,
.wp-dark-mode-active .badge-evidence,
.wp-dark-mode-active .btn-evidence,
body.dark-mode .badge-evidence,
body.dark-mode .btn-evidence,
html[data-wp-dark-mode-scheme="dark"] .badge-evidence,
html[data-wp-dark-mode-scheme="dark"] .btn-evidence {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

[data-theme="dark"] .badge-evidence:hover,
[data-theme="dark"] .btn-evidence:hover,
.aura-dark-mode .badge-evidence:hover,
.aura-dark-mode .btn-evidence:hover,
.wp-dark-mode-active .badge-evidence:hover,
.wp-dark-mode-active .btn-evidence:hover,
body.dark-mode .badge-evidence:hover,
body.dark-mode .btn-evidence:hover,
html[data-wp-dark-mode-scheme="dark"] .badge-evidence:hover,
html[data-wp-dark-mode-scheme="dark"] .btn-evidence:hover {
    background: var(--aura-blue, #2563eb) !important;
    color: #ffffff !important;
    border-color: var(--aura-blue, #2563eb) !important;
}

[data-theme="dark"] .aura-table-thumb-preview,
[data-theme="dark"] .aura-img-preview-trigger,
.aura-dark-mode .aura-table-thumb-preview,
.aura-dark-mode .aura-img-preview-trigger,
.wp-dark-mode-active .aura-table-thumb-preview,
.wp-dark-mode-active .aura-img-preview-trigger,
body.dark-mode .aura-table-thumb-preview,
body.dark-mode .aura-img-preview-trigger,
html[data-wp-dark-mode-scheme="dark"] .aura-table-thumb-preview,
html[data-wp-dark-mode-scheme="dark"] .aura-img-preview-trigger {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .micro-progress-bar,
.aura-dark-mode .micro-progress-bar,
.wp-dark-mode-active .micro-progress-bar,
body.dark-mode .micro-progress-bar,
html[data-wp-dark-mode-scheme="dark"] .micro-progress-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .table-row-hover-lift tbody tr:hover,
[data-theme="dark"] table.aura-table-hover tbody tr:hover,
.aura-dark-mode .table-row-hover-lift tbody tr:hover,
.aura-dark-mode table.aura-table-hover tbody tr:hover,
.wp-dark-mode-active .table-row-hover-lift tbody tr:hover,
.wp-dark-mode-active table.aura-table-hover tbody tr:hover,
body.dark-mode .table-row-hover-lift tbody tr:hover,
body.dark-mode table.aura-table-hover tbody tr:hover,
html[data-wp-dark-mode-scheme="dark"] .table-row-hover-lift tbody tr:hover,
html[data-wp-dark-mode-scheme="dark"] table.aura-table-hover tbody tr:hover {
    background-color: #262444 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP 5.3 INPUT GROUPS & FORM CONTROLS
   ═══════════════════════════════════════════════════════════════ */
.mb-3 {
    margin-bottom: 1rem !important;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--aura-text-primary, #1e293b);
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

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

.input-group .form-control:focus {
    z-index: 5;
}

.input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--aura-text-secondary, #64748b);
    text-align: center;
    white-space: nowrap;
    background-color: var(--aura-surface-alt, #f8fafc);
    border: 1px solid var(--aura-border, #cbd5e1);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

.input-group-text .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    color: inherit;
}

.input-group-text.aura-btn-toggle-pass {
    cursor: pointer;
    background-color: var(--aura-surface-alt, #f8fafc);
    border: 1px solid var(--aura-border, #cbd5e1);
    outline: none;
    user-select: none;
}
.input-group-text.aura-btn-toggle-pass:hover {
    background-color: #f1f5f9;
    color: var(--aura-indigo, #4f46e5);
}

/* Redondeo de bordes Bootstrap 5.3 en input-group */
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group > .form-floating:not(:last-child) > .form-control,
.input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Control de formulario .form-control */
.form-control {
    display: block;
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--aura-text-primary, #1e293b);
    background-color: var(--aura-surface, #ffffff);
    background-clip: padding-box;
    border: 1px solid var(--aura-border, #cbd5e1);
    appearance: none;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
    color: var(--aura-text-primary, #1e293b);
    background-color: var(--aura-surface, #ffffff);
    border-color: var(--aura-indigo-light, #818cf8);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Soporte Modo Oscuro para Input Groups */
[data-theme="dark"] .input-group-text,
html[data-wp-dark-mode-scheme="dark"] .input-group-text,
body.aura-dark-mode .input-group-text {
    background-color: #1a2333 !important;
    border-color: #2e3d56 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .input-group-text.aura-btn-toggle-pass:hover,
html[data-wp-dark-mode-scheme="dark"] .input-group-text.aura-btn-toggle-pass:hover,
body.aura-dark-mode .input-group-text.aura-btn-toggle-pass:hover {
    background-color: #243044 !important;
    color: #818cf8 !important;
}

[data-theme="dark"] .input-group .form-control,
html[data-wp-dark-mode-scheme="dark"] .input-group .form-control,
body.aura-dark-mode .input-group .form-control {
    background-color: #111827 !important;
    border-color: #2e3d56 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .input-group .form-control:focus,
html[data-wp-dark-mode-scheme="dark"] .input-group .form-control:focus,
body.aura-dark-mode .input-group .form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}