/* ============================================
   RecomiendaMás - UI v5: COMMERCIAL GRADE
   Dark mode, glassmorphism, micro-animations,
   professional components, accessibility
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ============ THEME VARIABLES ============ */
:root{
    --primary:#4F46E5;
    --primary-light:#6366F1;
    --primary-dark:#3730A3;
    --primary-soft:rgba(79,70,229,0.08);
    --primary-glow:rgba(79,70,229,0.25);
    --accent:#F97316;
    --accent-light:#FB923C;
    --accent-soft:rgba(249,115,22,0.1);
    --success:#16A34A;
    --success-light:#22C55E;
    --success-soft:rgba(22,163,74,0.08);
    --danger:#DC2626;
    --danger-light:#EF4444;
    --danger-soft:rgba(220,38,38,0.08);
    --warning:#D97706;
    --warning-light:#F59E0B;
    --warning-soft:rgba(217,119,6,0.08);
    --info:#0284C7;
    --info-light:#0EA5E9;
    --info-soft:rgba(2,132,199,0.08);
    --bg-body:#F8FAFC;
    --bg-white:#FFFFFF;
    --bg-card:#FFFFFF;
    --bg-surface:#F1F5F9;
    --bg-sidebar:#FFFFFF;
    --bg-topbar:#FFFFFF;
    --bg-glass:rgba(255,255,255,0.7);
    --border:#E2E8F0;
    --border-light:#F1F5F9;
    --text:#0F172A;
    --text-secondary:#475569;
    --text-muted:#94A3B8;
    --text-on-primary:#FFFFFF;
    --gradient-primary:linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#A855F7 100%);
    --gradient-accent:linear-gradient(135deg,#F97316 0%,#FB923C 100%);
    --gradient-success:linear-gradient(135deg,#16A34A 0%,#22C55E 100%);
    --gradient-hero:linear-gradient(135deg,#EEF2FF 0%,#FFF7ED 50%,#F0FDF4 100%);
    --gradient-mesh:radial-gradient(at 40% 20%, rgba(79,70,229,0.04) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(249,115,22,0.03) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(22,163,74,0.03) 0px, transparent 50%);
    --sidebar-w:260px;
    --topbar-h:64px;
    --radius:10px;
    --radius-lg:14px;
    --radius-xl:20px;
    --radius-full:9999px;
    --shadow-xs:0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:0 4px 6px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:0 10px 25px rgba(0,0,0,0.08),0 4px 10px rgba(0,0,0,0.04);
    --shadow-xl:0 20px 50px rgba(0,0,0,0.1);
    --shadow-primary:0 4px 14px var(--primary-glow);
    --shadow-accent:0 4px 14px rgba(249,115,22,0.3);
    --shadow-glass:0 8px 32px rgba(0,0,0,0.06);
    --transition:0.2s ease;
    --transition-bounce:0.35s cubic-bezier(0.34,1.56,0.64,1);
    --transition-smooth:0.4s cubic-bezier(0.16,1,0.3,1);
    --gray:var(--text-muted);
    --white:var(--bg-white);
    --dark:var(--bg-surface);
    --dark-light:var(--bg-card);
    --dark-lighter:var(--border);
    --gray-light:var(--text-secondary);
}

/* ============ DARK MODE ============ */
[data-theme="dark"]{
    --primary:#818CF8;
    --primary-light:#A5B4FC;
    --primary-dark:#6366F1;
    --primary-soft:rgba(129,140,248,0.12);
    --primary-glow:rgba(129,140,248,0.3);
    --accent:#FB923C;
    --accent-light:#FDBA74;
    --accent-soft:rgba(251,146,60,0.12);
    --success:#4ADE80;
    --success-light:#86EFAC;
    --success-soft:rgba(74,222,128,0.12);
    --danger:#F87171;
    --danger-light:#FCA5A5;
    --danger-soft:rgba(248,113,113,0.12);
    --warning:#FBBF24;
    --warning-light:#FDE68A;
    --warning-soft:rgba(251,191,36,0.12);
    --info:#38BDF8;
    --info-light:#7DD3FC;
    --info-soft:rgba(56,189,248,0.12);
    --bg-body:#0F172A;
    --bg-white:#1E293B;
    --bg-card:#1E293B;
    --bg-surface:#0F172A;
    --bg-sidebar:#1E293B;
    --bg-topbar:#1E293B;
    --bg-glass:rgba(30,41,59,0.8);
    --border:#334155;
    --border-light:#1E293B;
    --text:#F1F5F9;
    --text-secondary:#94A3B8;
    --text-muted:#64748B;
    --gradient-primary:linear-gradient(135deg,#818CF8 0%,#A78BFA 50%,#C084FC 100%);
    --gradient-hero:linear-gradient(135deg,#1E1B4B 0%,#1C1917 50%,#052E16 100%);
    --gradient-mesh:radial-gradient(at 40% 20%, rgba(129,140,248,0.06) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(251,146,60,0.04) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(74,222,128,0.04) 0px, transparent 50%);
    --shadow-xs:0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:0 4px 6px rgba(0,0,0,0.25);
    --shadow-lg:0 10px 25px rgba(0,0,0,0.3);
    --shadow-xl:0 20px 50px rgba(0,0,0,0.4);
    --shadow-primary:0 4px 14px rgba(129,140,248,0.25);
    --shadow-glass:0 8px 32px rgba(0,0,0,0.2);
}
[data-theme="dark"] .alert-success{background:rgba(74,222,128,0.1);border-color:rgba(74,222,128,0.2);color:#4ADE80;}
[data-theme="dark"] .alert-danger{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.2);color:#F87171;}
[data-theme="dark"] .alert-warning{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.2);color:#FBBF24;}
[data-theme="dark"] .alert-info{background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.2);color:#38BDF8;}
[data-theme="dark"] .badge-new,[data-theme="dark"] .badge-qualification{background:rgba(56,189,248,0.15);color:#38BDF8;}
[data-theme="dark"] .badge-contacted{background:rgba(167,139,250,0.15);color:#A78BFA;}
[data-theme="dark"] .badge-qualified,[data-theme="dark"] .badge-won,[data-theme="dark"] .badge-closed_won,[data-theme="dark"] .badge-active,[data-theme="dark"] .badge-completed{background:rgba(74,222,128,0.15);color:#4ADE80;}
[data-theme="dark"] .badge-proposal,[data-theme="dark"] .badge-negotiation,[data-theme="dark"] .badge-pending,[data-theme="dark"] .badge-task{background:rgba(251,191,36,0.15);color:#FBBF24;}
[data-theme="dark"] .badge-lost,[data-theme="dark"] .badge-closed_lost{background:rgba(248,113,113,0.15);color:#F87171;}
[data-theme="dark"] .badge-inactive,[data-theme="dark"] .badge-note{background:rgba(100,116,139,0.15);color:#94A3B8;}
[data-theme="dark"] .login-box .login-demo{background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.15);}
[data-theme="dark"] .pricing-card-featured{border-color:var(--primary);background:var(--bg-card);}
[data-theme="dark"] ::selection{background:rgba(129,140,248,0.3);color:#F1F5F9;}

/* ============ BASE ============ */
html{font-size:16px;scroll-behavior:smooth;}
body,.app-body{
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    background:var(--bg-body);
    background-image:var(--gradient-mesh);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
    transition:background-color 0.3s ease, color 0.3s ease;
}
a{text-decoration:none;color:inherit;transition:var(--transition);}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
::selection{background:var(--primary-soft);color:var(--primary-dark);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full);}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* ============ LAYOUT ============ */
.app-wrap{display:flex;min-height:100vh;}

/* ---- Sidebar ---- */
.app-sidebar{
    width:var(--sidebar-w);
    background:var(--bg-sidebar);
    border-right:1px solid var(--border);
    position:fixed;top:0;left:0;bottom:0;z-index:50;
    display:flex;flex-direction:column;overflow:hidden;
    transition:transform var(--transition-smooth), background-color 0.3s ease;
    overflow-y:auto;
    display:flex;flex-direction:column;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.app-sidebar .logo{
    display:flex;align-items:center;gap:12px;
    padding:20px 22px;
    border-bottom:1px solid var(--border-light);
    font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;
    color:var(--text);
    transition:var(--transition);
}
.app-sidebar .logo:hover{opacity:0.8;}
.app-sidebar .logo i{
    width:40px;height:40px;
    border-radius:var(--radius);
    background:var(--gradient-primary);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;
    box-shadow:var(--shadow-primary);
    transition:var(--transition-bounce);
}
.app-sidebar .logo:hover i{transform:scale(1.08) rotate(-5deg);}
.app-sidebar .logo strong{color:var(--primary);}
.app-sidebar nav{padding:16px 0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.app-sidebar nav::-webkit-scrollbar{width:4px;}
.app-sidebar nav::-webkit-scrollbar-track{background:transparent;}
.app-sidebar nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.app-sidebar nav::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
.app-sidebar .nav-section{
    font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--text-muted);padding:16px 22px 6px;font-weight:700;
}
.app-sidebar .nav-link{
    display:flex;align-items:center;gap:12px;
    padding:11px 22px;margin:2px 8px;
    color:var(--text-secondary);
    font-size:0.9rem;font-weight:500;
    border-radius:var(--radius);
    transition:var(--transition);
    border:none;position:relative;
}
.app-sidebar .nav-link i{width:22px;text-align:center;font-size:0.95rem;color:var(--text-muted);transition:var(--transition);}
.app-sidebar .nav-link:hover{background:var(--primary-soft);color:var(--primary);}
.app-sidebar .nav-link:hover i{color:var(--primary);transform:scale(1.1);}
.app-sidebar .nav-link.active{
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:700;
}
.app-sidebar .nav-link.active i{color:var(--primary);}
.app-sidebar .nav-link.active::after{
    content:'';position:absolute;right:14px;
    width:7px;height:7px;border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 8px var(--primary-glow);
    animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.3);}}
.app-sidebar .sidebar-footer{
    border-top:1px solid var(--border-light);
    padding:16px 22px;font-size:0.75rem;color:var(--text-muted);
    display:flex;align-items:center;justify-content:space-between;
}

/* ---- Main ---- */
.app-main{flex:1;margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left 0.3s ease;}

/* ---- Topbar ---- */
.app-topbar{
    height:var(--topbar-h);
    background:var(--bg-topbar);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 24px;position:sticky;top:0;z-index:40;
    gap:16px;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:background-color 0.3s ease;
}
.app-topbar .topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.app-topbar .menu-toggle{
    display:none;background:var(--bg-surface);border:1px solid var(--border);
    color:var(--text-secondary);width:42px;height:42px;border-radius:var(--radius);
    cursor:pointer;align-items:center;justify-content:center;transition:var(--transition);
}
.app-topbar .menu-toggle:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft);}
.app-topbar .page-title-top{font-size:1rem;font-weight:700;display:none;color:var(--text);}
.app-topbar .tenant-name{font-size:0.88rem;color:var(--text-muted);}
.app-topbar .tenant-name strong{color:var(--text);}
.app-topbar .user-menu{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.app-topbar .user-menu .plan-badge{
    background:var(--success-soft);color:var(--success);
    padding:6px 14px;border-radius:var(--radius-full);
    font-size:0.72rem;font-weight:700;
    border:1px solid rgba(22,163,74,0.15);
}
.app-topbar .user-menu .user-name{font-size:0.85rem;color:var(--text-secondary);font-weight:500;}
.app-topbar .user-menu a, .app-topbar .user-menu button{
    font-size:0.85rem;color:var(--text-muted);padding:8px 10px;
    border-radius:var(--radius);display:inline-flex;align-items:center;gap:5px;
    background:none;border:none;cursor:pointer;font-family:inherit;
    transition:var(--transition);
}
.app-topbar .user-menu a:hover, .app-topbar .user-menu button:hover{color:var(--primary);background:var(--primary-soft);}

/* Theme Toggle */
.theme-toggle{
    position:relative;
    width:44px;height:26px;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-full);
    cursor:pointer;padding:0;
    transition:var(--transition);
    display:inline-flex;align-items:center;
}
.theme-toggle::after{
    content:'';position:absolute;left:3px;top:3px;
    width:18px;height:18px;border-radius:50%;
    background:var(--primary);
    transition:var(--transition-bounce);
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.theme-toggle.dark::after{transform:translateX(18px);background:var(--accent);}
.theme-toggle .theme-icon{
    position:absolute;font-size:0.6rem;
    transition:var(--transition);
    pointer-events:none;
}
.theme-toggle .theme-icon.sun{left:6px;color:var(--warning);opacity:1;}
.theme-toggle .theme-icon.moon{right:6px;color:var(--primary-light);opacity:0.4;}
.theme-toggle.dark .theme-icon.sun{opacity:0.4;}
.theme-toggle.dark .theme-icon.moon{opacity:1;}

/* Notification Bell */
.notif-bell{position:relative;}
.notif-bell .notif-count{
    position:absolute;top:2px;right:2px;
    min-width:16px;height:16px;
    background:var(--danger);color:#fff;
    border-radius:var(--radius-full);
    font-size:0.6rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px;
    animation:notif-bounce 0.5s ease;
    box-shadow:0 0 0 2px var(--bg-topbar);
}
@keyframes notif-bounce{0%{transform:scale(0);}50%{transform:scale(1.3);}100%{transform:scale(1);}}

.app-content{padding:28px;flex:1;max-width:1320px;width:100%;margin:0 auto;}

/* ============ TOAST NOTIFICATIONS ============ */
.toast-container{
    position:fixed;top:80px;right:24px;z-index:10000;
    display:flex;flex-direction:column;gap:10px;
    pointer-events:none;
}
.toast{
    pointer-events:auto;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:14px 20px;
    display:flex;align-items:center;gap:12px;
    box-shadow:var(--shadow-lg);
    animation:toastSlideIn 0.4s cubic-bezier(0.16,1,0.3,1);
    max-width:380px;min-width:280px;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:all 0.3s ease;
}
.toast.toast-leaving{opacity:0;transform:translateX(100px);pointer-events:none;}
.toast-icon{font-size:1.1rem;flex-shrink:0;}
.toast-success .toast-icon{color:var(--success);}
.toast-error .toast-icon{color:var(--danger);}
.toast-info .toast-icon{color:var(--info);}
.toast-warning .toast-icon{color:var(--warning);}
.toast-body{flex:1;}
.toast-title{font-size:0.85rem;font-weight:700;color:var(--text);}
.toast-msg{font-size:0.8rem;color:var(--text-muted);margin-top:2px;}
.toast-close{
    background:none;border:none;color:var(--text-muted);cursor:pointer;
    padding:4px;border-radius:var(--radius);font-size:0.9rem;
    transition:var(--transition);flex-shrink:0;
}
.toast-close:hover{color:var(--text);background:var(--bg-surface);}
.toast-progress{
    position:absolute;bottom:0;left:0;height:3px;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    background:var(--primary);
    animation:toastProgress 4s linear forwards;
}
.toast-success .toast-progress{background:var(--success);}
.toast-error .toast-progress{background:var(--danger);}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(100px) scale(0.95);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes toastProgress{from{width:100%;}to{width:0%;}}

/* ============ ALERTS ============ */
.alert{
    padding:16px 48px 16px 18px;border-radius:var(--radius-lg);
    margin-bottom:20px;position:relative;
    animation:slideDown 0.3s ease;font-size:0.9rem;font-weight:500;
    display:flex;align-items:center;gap:12px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.alert-success{background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D;}
.alert-danger{background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;}
.alert-warning{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E;}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8;}
.alert .alert-close{
    position:absolute;top:50%;right:14px;transform:translateY(-50%);
    background:none;border:none;color:inherit;opacity:0.5;cursor:pointer;
    padding:6px;font-size:1.2rem;border-radius:6px;transition:var(--transition);
}
.alert .alert-close:hover{opacity:1;background:rgba(0,0,0,0.05);}

/* ============ PAGE HEADER ============ */
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px;}
.page-title{font-size:1.75rem;font-weight:800;letter-spacing:-0.03em;color:var(--text);}
.page-subtitle{font-size:0.9rem;color:var(--text-muted);margin-top:2px;}

/* ============ CARDS ============ */
.card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;margin-bottom:20px;
    transition:var(--transition);
    box-shadow:var(--shadow-xs);
    position:relative;
    overflow:hidden;
}
.card::before{display:none;}
.card:hover{box-shadow:var(--shadow-sm);}
.card-glass{
    background:var(--bg-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.card-title{
    font-size:1.05rem;margin-bottom:16px;font-weight:700;
    display:flex;align-items:center;gap:10px;color:var(--text);
}
.card-title i{color:var(--primary);font-size:0.95rem;}
.card-actions{display:flex;gap:8px;align-items:center;margin-left:auto;}

/* ============ SEARCH ============ */
.search-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.search-bar .search-input-wrap{position:relative;flex:1;min-width:220px;max-width:380px;}
.search-bar .search-input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.9rem;}
.search-bar .search-input-wrap input{
    width:100%;padding:11px 16px 11px 40px;
    background:var(--bg-white);border:1px solid var(--border);
    border-radius:var(--radius);color:var(--text);font-size:0.9rem;
    transition:var(--transition);
}
.search-bar .search-input-wrap input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.search-bar .search-input-wrap input::placeholder{color:var(--text-muted);}
.search-bar .filter-group select{
    padding:10px 14px;background:var(--bg-white);border:1px solid var(--border);
    border-radius:var(--radius);color:var(--text-secondary);font-size:0.85rem;
    cursor:pointer;transition:var(--transition);
}
.search-bar .filter-group select:focus{outline:none;border-color:var(--primary);}
.search-count{font-size:0.8rem;color:var(--text-muted);margin-left:auto;}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);}
table{width:100%;border-collapse:collapse;}
table th,table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border-light);}
table th{
    font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--text-muted);font-weight:700;background:var(--bg-surface);white-space:nowrap;
    position:sticky;top:0;
}
table tbody tr{transition:var(--transition);}
table tbody tr:hover td{background:var(--primary-soft);}
table tbody tr:last-child td{border-bottom:none;}
table td{font-size:0.88rem;color:var(--text-secondary);}
table td a[href]:not(.btn){color:var(--primary);font-weight:600;}
table td a[href]:not(.btn):hover{text-decoration:underline;}
.table-actions{display:flex;gap:8px;align-items:center;white-space:nowrap;}

/* Bulk Selection */
.bulk-select{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;}
.bulk-bar{
    display:none;align-items:center;gap:12px;
    padding:12px 18px;margin-bottom:12px;
    background:var(--primary-soft);border:1px solid rgba(79,70,229,0.15);
    border-radius:var(--radius-lg);animation:slideDown 0.3s ease;
}
.bulk-bar.active{display:flex;}
.bulk-bar .bulk-count{font-size:0.88rem;font-weight:700;color:var(--primary);}
.bulk-bar .bulk-actions{display:flex;gap:8px;margin-left:auto;}

.empty-state{padding:60px 24px;text-align:center;}
.empty-state .empty-icon{font-size:3.5rem;margin-bottom:20px;color:var(--primary);opacity:0.4;}
.empty-state .empty-title{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:8px;}
.empty-state .empty-text{font-size:0.9rem;color:var(--text-muted);margin-bottom:24px;max-width:360px;margin-left:auto;margin-right:auto;line-height:1.6;}
.no-results-cell{border-bottom:none !important;background:transparent !important;}
.no-results-cell .empty-state{padding:32px 24px;}
.no-results-cell .empty-icon{font-size:2.5rem;opacity:0.3;}

/* ============ BADGES ============ */
.badge{
    display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
    border-radius:var(--radius-full);font-size:0.73rem;font-weight:700;white-space:nowrap;
    transition:var(--transition);
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:var(--transition);}
.badge-new,.badge-qualification{background:#EFF6FF;color:#1D4ED8;}.badge-new::before,.badge-qualification::before{background:#3B82F6;}
.badge-contacted{background:#F5F3FF;color:#6D28D9;}.badge-contacted::before{background:#7C3AED;}
.badge-qualified,.badge-won,.badge-closed_won,.badge-active,.badge-completed{background:#F0FDF4;color:#15803D;}.badge-qualified::before,.badge-won::before,.badge-closed_won::before,.badge-active::before,.badge-completed::before{background:#22C55E;}
.badge-proposal,.badge-negotiation,.badge-pending,.badge-task{background:#FFFBEB;color:#92400E;}.badge-proposal::before,.badge-negotiation::before,.badge-pending::before,.badge-task::before{background:#F59E0B;}
.badge-lost,.badge-closed_lost{background:#FEF2F2;color:#B91C1C;}.badge-lost::before,.badge-closed_lost::before{background:#EF4444;}
.badge-inactive,.badge-note{background:var(--bg-surface);color:var(--text-muted);}.badge-inactive::before,.badge-note::before{background:var(--text-muted);}
.badge-call{background:#EFF6FF;color:#1D4ED8;}
.badge-meeting{background:#F5F3FF;color:#6D28D9;}
.badge-email{background:#F0FDF4;color:#15803D;}

/* Puntuación de contacto (caliente/tibio/frío) */
.lead-score{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;border-radius:var(--radius-full);
    font-size:0.72rem;font-weight:700;
}
.lead-score-hot{background:linear-gradient(135deg,#EF4444,#F97316);color:#fff;}
.lead-score-warm{background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#78350F;}
.lead-score-cold{background:var(--bg-surface);color:var(--text-muted);}

/* ============ BUTTONS ============ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 22px;border-radius:var(--radius);font-weight:700;font-size:0.88rem;
    border:2px solid transparent;cursor:pointer;
    transition:var(--transition-bounce);font-family:inherit;white-space:nowrap;
    position:relative;overflow:hidden;
}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(255,255,255,0.15),transparent);
    opacity:0;transition:var(--transition);
    pointer-events:none;
}
.btn:hover::after{opacity:1;}
.btn-primary{
    background:var(--gradient-primary);color:#fff;
    box-shadow:var(--shadow-primary);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--primary-glow);}
.btn-primary:active{transform:translateY(0);}
.btn-accent{background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-accent);}
.btn-accent:hover{transform:translateY(-2px);}
.btn-outline{background:var(--bg-white);border-color:var(--border);color:var(--text-secondary);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);}
.btn-ghost{background:transparent;border:none;color:var(--text-muted);padding:10px 14px;}
.btn-ghost:hover{color:var(--primary);background:var(--primary-soft);}
.btn-sm{padding:8px 16px;font-size:0.82rem;}
.btn-xs{padding:6px 12px;font-size:0.75rem;}
.btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger);}
.btn-danger:hover{background:#FEE2E2;transform:translateY(-1px);}
.btn-success{background:var(--success-soft);border-color:transparent;color:var(--success);}
.btn-success:hover{background:#DCFCE7;transform:translateY(-1px);}
.btn-whatsapp{background:#25D366;color:#fff;border:none;box-shadow:0 4px 14px rgba(37,211,102,0.3);}
.btn-whatsapp:hover{background:#20BD5A;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,0.4);}
.btn-block{width:100%;}
.btn-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.btn-icon{padding:8px;width:36px;height:36px;border-radius:var(--radius);}

/* ============ FORMS ============ */
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:0.84rem;font-weight:600;margin-bottom:8px;color:var(--text);}
.form-group label .required{color:var(--danger);}
.form-group input,.form-group select,.form-group textarea{
    width:100%;padding:12px 16px;
    background:var(--bg-white);border:1px solid var(--border);
    border-radius:var(--radius);color:var(--text);font-size:0.9rem;
    transition:var(--transition);font-family:inherit;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);}
.form-group textarea{min-height:96px;resize:vertical;}
.form-group .form-hint{font-size:0.75rem;color:var(--text-muted);margin-top:4px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.form-check{display:flex;align-items:center;gap:10px;font-size:0.9rem;cursor:pointer;color:var(--text);}
.form-check input[type="checkbox"]{width:20px;height:20px;accent-color:var(--primary);cursor:pointer;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:48px;}
.password-wrap .password-toggle{
    position:absolute;right:2px;top:2px;bottom:2px;width:44px;background:none;border:none;
    color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
    border-radius:0 var(--radius) var(--radius) 0;transition:var(--transition);
}
.password-wrap .password-toggle:hover{color:var(--primary);}

/* ============ STATS ============ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:28px;}
.stat-card:nth-child(1){animation-delay:0.05s;}
.stat-card:nth-child(2){animation-delay:0.1s;}
.stat-card:nth-child(3){animation-delay:0.15s;}
.stat-card:nth-child(4){animation-delay:0.2s;}
@keyframes cardSlideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.stat-card{
    animation:cardSlideUp 0.45s ease backwards;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    transition:var(--transition-bounce);
    position:relative;overflow:hidden;
    box-shadow:var(--shadow-xs);
}
.stat-card::before{display:none;}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.stat-card .stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.stat-card .stat-icon{
    width:48px;height:48px;border-radius:var(--radius-lg);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
    transition:var(--transition-bounce);
}
.stat-card:hover .stat-icon{transform:scale(1.1) rotate(-5deg);}
.stat-card .stat-icon.icon-purple{background:var(--primary-soft);color:var(--primary);}
.stat-card .stat-icon.icon-green{background:var(--success-soft);color:var(--success);}
.stat-card .stat-icon.icon-blue{background:var(--info-soft);color:var(--info);}
.stat-card .stat-icon.icon-amber{background:var(--accent-soft);color:var(--accent);}
.stat-card .stat-icon.icon-red{background:var(--danger-soft);color:var(--danger);}
.stat-card .value{font-size:2rem;font-weight:800;line-height:1.2;color:var(--text);}
.stat-card .value.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-card .label{font-size:0.8rem;color:var(--text-muted);margin-top:6px;font-weight:500;}
.stat-card .stat-change{font-size:0.75rem;padding:4px 10px;border-radius:var(--radius-full);font-weight:700;display:inline-flex;align-items:center;gap:4px;margin-top:8px;}
.stat-card .stat-change.up{background:#F0FDF4;color:#15803D;}
.stat-card .stat-change.down{background:#FEF2F2;color:#B91C1C;}
.usage-bar{height:8px;background:var(--bg-surface);border-radius:var(--radius-full);overflow:hidden;margin-top:12px;}
.usage-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.6s ease;background:var(--gradient-primary);}
.usage-bar-fill.warn{background:linear-gradient(90deg,var(--warning),var(--danger));}
.quick-actions{display:flex;flex-wrap:wrap;gap:12px;}
.quick-actions .btn{flex:1;min-width:160px;}

/* ============ CHARTS ============ */
.chart-container{position:relative;width:100%;min-height:240px;}
.chart-container canvas{max-height:300px;}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-xs);}
.chart-card .chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.chart-card .chart-title{font-size:1rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.chart-card .chart-title i{color:var(--primary);font-size:0.9rem;}

/* ============ MINI KPI ROW ============ */
.kpi-row{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;margin-bottom:20px;
}
.kpi-item{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:16px;
    text-align:center;transition:var(--transition);
}
.kpi-item:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);}
.kpi-value{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.2;}
.kpi-label{font-size:0.75rem;color:var(--text-muted);margin-top:4px;font-weight:500;}
.kpi-change{font-size:0.7rem;font-weight:700;margin-top:4px;}
.kpi-change.positive{color:var(--success);}
.kpi-change.negative{color:var(--danger);}

/* ============ TIMELINE ============ */
.timeline{list-style:none;padding:0;margin:0;}
.timeline-item{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-light);transition:var(--transition);}
.timeline-item:last-child{border-bottom:none;}
.timeline-item:hover{background:var(--primary-soft);border-radius:var(--radius);padding-left:8px;padding-right:8px;}
.timeline-icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;transition:var(--transition-bounce);}
.timeline-item:hover .timeline-icon{transform:scale(1.1);}
.timeline-icon.t-lead{background:var(--info-soft);color:var(--info);}
.timeline-icon.t-deal{background:var(--accent-soft);color:var(--accent);}
.timeline-icon.t-activity{background:var(--primary-soft);color:var(--primary);}
.timeline-icon.t-won{background:var(--success-soft);color:var(--success);}
.timeline-body .timeline-title{font-size:0.9rem;font-weight:600;color:var(--text);}
.timeline-body .timeline-meta{font-size:0.78rem;color:var(--text-muted);margin-top:2px;}

/* ============ KANBAN ============ */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch;}
.kanban-col{min-width:260px;max-width:320px;flex:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;max-height:70vh;transition:var(--transition);}
.kanban-col-header{padding:16px 18px;border-bottom:1px solid var(--border);font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;color:var(--text);}
.kanban-col-header .kanban-count{background:var(--bg-white);padding:4px 10px;border-radius:var(--radius-full);font-size:0.75rem;border:1px solid var(--border);}
.kanban-col-body{padding:10px;flex:1;overflow-y:auto;}
.kanban-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;cursor:pointer;transition:var(--transition);font-size:0.88rem;box-shadow:var(--shadow-xs);position:relative;}
.kanban-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kanban-card .kc-title{font-weight:700;margin-bottom:6px;color:var(--text);}
.kanban-card .kc-title a{color:var(--text);}
.kanban-card .kc-title a:hover{color:var(--primary);}
.kanban-card .kc-meta{font-size:0.78rem;color:var(--text-muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.kanban-card .kc-value{font-weight:800;color:var(--success);}
.kanban-card .kc-actions{margin-top:8px;display:flex;gap:4px;}
.kanban-card[draggable="true"]{cursor:grab;}
.kanban-card.dragging{opacity:0.4;transform:rotate(2deg) scale(0.95);box-shadow:var(--shadow-lg);border-color:var(--primary);cursor:grabbing;}
.kanban-col.drag-over{background:var(--primary-soft);border-color:var(--primary);border-style:dashed;}
.kanban-col.drag-over .kanban-col-body{min-height:80px;}
.kanban-card.drag-ghost{opacity:0;height:0;padding:0;margin:0;border:none;overflow:hidden;}
.kanban-col .drop-placeholder{border:2px dashed var(--primary);border-radius:var(--radius);padding:20px;text-align:center;color:var(--primary);font-size:0.82rem;font-weight:600;margin-bottom:10px;background:var(--primary-soft);animation:pulseGlow 1.5s ease infinite;}
@keyframes pulseGlow{0%,100%{opacity:0.6;}50%{opacity:1;}}
.kanban-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg-body);padding:12px 24px;border-radius:var(--radius);font-size:0.88rem;font-weight:600;box-shadow:var(--shadow-lg);z-index:9999;animation:toastIn 0.3s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.kanban-col[data-stage="qualification"] .kanban-col-header{border-top:3px solid #3B82F6;}
.kanban-col[data-stage="proposal"] .kanban-col-header{border-top:3px solid #F59E0B;}
.kanban-col[data-stage="negotiation"] .kanban-col-header{border-top:3px solid var(--primary);}
.kanban-col[data-stage="closed_won"] .kanban-col-header{border-top:3px solid #22C55E;}
.kanban-col[data-stage="closed_lost"] .kanban-col-header{border-top:3px solid #EF4444;}

/* ============ VISUAL BARS ============ */
.vbar-group{margin-bottom:16px;}
.vbar-label{display:flex;justify-content:space-between;font-size:0.84rem;margin-bottom:6px;color:var(--text-secondary);}
.vbar-label .vbar-val{font-weight:700;color:var(--text);}
.vbar{height:10px;background:var(--bg-surface);border-radius:var(--radius-full);overflow:hidden;}
.vbar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.7s ease;}
.vbar-fill.fill-blue{background:linear-gradient(90deg,#3B82F6,#60A5FA);}
.vbar-fill.fill-purple{background:var(--gradient-primary);}
.vbar-fill.fill-green{background:linear-gradient(90deg,#16A34A,#22C55E);}
.vbar-fill.fill-amber{background:linear-gradient(90deg,#D97706,#F59E0B);}
.vbar-fill.fill-red{background:linear-gradient(90deg,#DC2626,#EF4444);}
.vbar-fill.fill-gradient{background:var(--gradient-primary);}
.conversion-ring{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.conversion-stat{text-align:center;}
.conversion-stat .cs-value{font-size:2.2rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.conversion-stat .cs-label{font-size:0.8rem;color:var(--text-muted);margin-top:4px;}

/* ============ PROFILE ============ */
.profile-card{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:800;flex-shrink:0;color:#fff;box-shadow:var(--shadow-primary);}
.profile-info{flex:1;min-width:200px;}
.profile-info h3{font-size:1.15rem;font-weight:800;margin-bottom:6px;color:var(--text);}
.profile-info .profile-meta{font-size:0.88rem;color:var(--text-secondary);}
.profile-info .profile-meta span{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.profile-info .profile-meta i{width:18px;color:var(--text-muted);text-align:center;}

/* ============ TABS ============ */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:24px;}
.tab{padding:12px 22px;font-size:0.9rem;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--transition);background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.tab-content{display:none;}
.tab-content.active{display:block;animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ============ MODAL ============ */
.modal-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;
    padding:24px;
    animation:modalFadeIn 0.2s ease;
}
.modal-overlay.active{display:flex;}
.modal{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    width:100%;max-width:520px;
    max-height:90vh;overflow-y:auto;
    box-shadow:var(--shadow-xl);
    animation:modalSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
}
.modal-header{
    padding:20px 24px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.modal-header h3{font-size:1.1rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px;}
.modal-header h3 i{color:var(--primary);}
.modal-close{
    background:var(--bg-surface);border:1px solid var(--border);
    width:32px;height:32px;border-radius:var(--radius);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:var(--text-muted);font-size:1.1rem;transition:var(--transition);
}
.modal-close:hover{color:var(--danger);background:var(--danger-soft);border-color:var(--danger);}
.modal-body{padding:24px;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}
@keyframes modalFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(20px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ============ COMMAND PALETTE ============ */
.cmd-palette-overlay{
    position:fixed;inset:0;z-index:99999;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:none;align-items:flex-start;justify-content:center;
    padding-top:15vh;
}
.cmd-palette-overlay.active{display:flex;}
.cmd-palette{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    width:100%;max-width:560px;
    box-shadow:var(--shadow-xl);
    animation:modalSlideUp 0.2s cubic-bezier(0.16,1,0.3,1);
    overflow:hidden;
}
.cmd-palette input{
    width:100%;padding:18px 24px;
    background:transparent;border:none;
    color:var(--text);font-size:1.05rem;font-family:inherit;
    border-bottom:1px solid var(--border);
}
.cmd-palette input:focus{outline:none;}
.cmd-palette input::placeholder{color:var(--text-muted);}
.cmd-results{max-height:320px;overflow-y:auto;padding:8px;}
.cmd-item{
    display:flex;align-items:center;gap:14px;
    padding:12px 16px;border-radius:var(--radius);
    cursor:pointer;transition:var(--transition);
    color:var(--text-secondary);
}
.cmd-item:hover,.cmd-item.active{background:var(--primary-soft);color:var(--primary);}
.cmd-item i{width:20px;text-align:center;font-size:0.9rem;opacity:0.6;}
.cmd-item span{font-size:0.9rem;font-weight:500;}
.cmd-item .cmd-shortcut{margin-left:auto;font-size:0.72rem;color:var(--text-muted);background:var(--bg-surface);padding:2px 8px;border-radius:4px;font-weight:600;border:1px solid var(--border);}
.cmd-hint{padding:12px 16px;font-size:0.78rem;color:var(--text-muted);text-align:center;border-top:1px solid var(--border);}

/* ============ LOGIN ============ */
.login-wrap{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:var(--gradient-hero);
    background-image:var(--gradient-mesh);
}
.login-wrap::before{display:none;}
.login-box{
    width:100%;max-width:440px;
    background:var(--bg-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:40px;
    box-shadow:var(--shadow-xl);
    animation:cardSlideUp 0.5s ease;
}
.login-box .logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:12px;font-size:1.4rem;color:var(--text);}
.login-box .logo i{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-primary);}
.login-box .logo strong{color:var(--primary);}
.login-box h1{text-align:center;font-size:1.15rem;margin-bottom:28px;font-weight:600;color:var(--text-secondary);}
.login-box .btn-primary{width:100%;padding:14px;font-size:1rem;}
.login-box .login-footer{text-align:center;margin-top:28px;font-size:0.85rem;color:var(--text-muted);line-height:1.8;}
.login-box .login-footer a{color:var(--primary);font-weight:600;}
.login-box .login-footer a:hover{text-decoration:underline;}
.login-box .login-demo{background:var(--primary-soft);border:1px solid rgba(79,70,229,0.12);border-radius:var(--radius);padding:12px 16px;margin-top:20px;font-size:0.8rem;color:var(--text-secondary);text-align:center;}
.login-box .login-demo code{color:var(--primary);font-weight:700;}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
    position:fixed;bottom:24px;right:24px;z-index:100;
    width:56px;height:56px;border-radius:50%;
    background:#25D366;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;cursor:pointer;
    box-shadow:0 4px 20px rgba(37,211,102,0.4);
    transition:var(--transition-bounce);
    border:none;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 8px 30px rgba(37,211,102,0.5);}

/* ============ SKELETON LOADING ============ */
.skeleton{
    background:linear-gradient(90deg,var(--bg-surface) 25%,var(--border-light) 50%,var(--bg-surface) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s ease-in-out infinite;
    border-radius:var(--radius);
}
.skeleton-text{height:14px;margin-bottom:8px;width:80%;}
.skeleton-title{height:20px;margin-bottom:12px;width:60%;}
.skeleton-avatar{width:48px;height:48px;border-radius:50%;}
.skeleton-card{height:120px;margin-bottom:16px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ============ MISC ============ */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:45;opacity:0;transition:opacity var(--transition);}
.sidebar-overlay.active{display:block;opacity:1;}
[data-tooltip]{position:relative;}
[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg-body);font-size:0.72rem;padding:6px 12px;border-radius:var(--radius);white-space:nowrap;box-shadow:var(--shadow-md);z-index:100;animation:fadeIn 0.15s ease;pointer-events:none;}

/* Keyboard shortcut hint */
.kbd{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--bg-surface);border:1px solid var(--border);
    border-radius:4px;padding:2px 6px;
    font-size:0.68rem;font-weight:600;color:var(--text-muted);
    font-family:'SF Mono',Consolas,monospace;
    line-height:1.5;min-width:20px;
    box-shadow:0 1px 0 var(--border);
}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}

/* Pulse animation for live indicators */
.pulse{animation:pulse-live 2s ease infinite;}
@keyframes pulse-live{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* Export button styling */
.btn-export{
    background:var(--bg-white);border:1px solid var(--border);
    color:var(--text-secondary);
}
.btn-export:hover{border-color:var(--success);color:var(--success);background:var(--success-soft);}
.btn-export i{color:var(--success);}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
    .charts-grid,.grid-2{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
    .app-sidebar{transform:translateX(-100%);width:min(280px,88vw);box-shadow:none;}
    .app-sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl);}
    .app-main{margin-left:0;}
    .app-topbar .menu-toggle{display:flex;}
    .app-topbar .page-title-top{display:block;}
    .app-topbar .tenant-name{display:none;}
    .app-topbar .user-menu .user-name{display:none;}
    .app-content{padding:18px 16px;}
    .page-header{flex-direction:column;align-items:flex-start;}
    .page-title{font-size:1.5rem;}
    .stats-grid{grid-template-columns:1fr 1fr;gap:14px;}
    .stat-card{padding:18px;}
    .stat-card .value{font-size:1.5rem;}
    .stat-card .stat-icon{width:42px;height:42px;font-size:1rem;}
    .table-wrap{font-size:0.86rem;}
    table th,table td{padding:12px 14px;}
    .table-actions{flex-direction:column;gap:6px;}
    .kanban{flex-direction:column;}
    .kanban-col{min-width:100%;max-width:100%;max-height:none;}
    .search-bar{flex-direction:column;}
    .search-bar .search-input-wrap{max-width:100%;}
    .profile-card{flex-direction:column;align-items:center;text-align:center;}
    .form-row{grid-template-columns:1fr;}
    .quick-actions .btn{min-width:100%;}
    .tabs{overflow-x:auto;}
    .tab{white-space:nowrap;flex-shrink:0;}
    .grid-2,.grid-3,.charts-grid{grid-template-columns:1fr;}
    .kpi-row{grid-template-columns:1fr 1fr;}
    .toast-container{top:auto;bottom:24px;right:12px;left:12px;}
    .toast{max-width:100%;min-width:auto;}
}
@media (max-width:480px){
    .stat-card .value{font-size:1.3rem;}
    .stats-grid,.kpi-row{grid-template-columns:1fr;}
}
@media print{
    .app-sidebar,.app-topbar,.sidebar-overlay,.menu-toggle,.btn,.toast-container,.cmd-palette-overlay,.wa-float{display:none !important;}
    .app-main{margin-left:0 !important;}
    body,.app-body{background:#fff;color:#000;}
    .card,.stat-card{border:1px solid #ddd;box-shadow:none;}
}