/* ==========================================================================
   AS Sierra Systems - Dashboard CSS
   ========================================================================== */

:root {
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --secondary: #2563eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    --font-family: 'Outfit', sans-serif;
}

/* ── Instant Theme Switching (Zero Stagger / Instant Flash 0ms) ── */
html.theme-instant,
html.theme-instant *,
html.theme-instant *::before,
html.theme-instant *::after,
body.theme-instant,
body.theme-instant *,
body.theme-instant *::before,
body.theme-instant *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

[data-theme="dark"] {
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-light: #334155;
    --bg-body: rgba(15, 23, 42, 0.6);

    --text: #f8fafc;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;

    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);

    /* Semantic: Primary */
    --primary-bg:     rgba(2, 132, 199, 0.12);
    --primary-border: rgba(2, 132, 199, 0.25);
    --primary-alpha:  rgba(2, 132, 199, 0.08);
    --primary-gradient: linear-gradient(135deg, #0284c7, #2563eb);
    --shadow-primary: 0 4px 14px rgba(2, 132, 199, 0.35);

    /* Semantic: Success */
    --success-bg:       rgba(16, 185, 129, 0.08);
    --success-border:   rgba(16, 185, 129, 0.2);
    --success-gradient: linear-gradient(135deg, #10b981, #059669);
    --shadow-success:   0 4px 14px rgba(16, 185, 129, 0.35);

    /* Semantic: Warning */
    --warning-bg:     rgba(245, 158, 11, 0.08);
    --warning-border: rgba(245, 158, 11, 0.2);

    /* Semantic: Danger */
    --danger-bg:     rgba(239, 68, 68, 0.08);
    --danger-border: rgba(239, 68, 68, 0.2);

    /* Misc */
    --surface-subtle: rgba(99, 102, 241, 0.06);
    --whatsapp: #25d366;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Dynamic Support Chat Variables */
    --chat-outer-bg: rgba(0, 0, 0, 0.18);
    --chat-header-bg: rgba(255, 255, 255, 0.03);
    --chat-search-bg: rgba(255, 255, 255, 0.05);
    --chat-meta-bg: rgba(255, 255, 255, 0.03);
    --chat-input-bar-bg: rgba(255, 255, 255, 0.02);
    --chat-input-bg: rgba(255, 255, 255, 0.05);
    --chat-button-bg: rgba(255, 255, 255, 0.04);
    --chat-canned-bg: rgba(30, 41, 59, 0.95);
    --chat-canned-border: rgba(255, 255, 255, 0.08);
    --chat-bubble-incoming: rgba(255, 255, 255, 0.06);
    --chat-date-bg: rgba(0, 0, 0, 0.3);
    --chat-date-text: var(--text-muted);
    --chat-option-hover: rgba(255, 255, 255, 0.05);
    --chat-status-btn-bg: rgba(255, 255, 255, 0.04);
    --chat-status-btn-hover: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
    --bg-base: #f1f5f9;         /* Slate-100 para un fondo mate muy suave */
    --bg-surface: #ffffff;      /* Blanco puro para las tarjetas y sidebar */
    --bg-surface-light: #f8fafc;/* Slate-50 para fondos de inputs, dropdowns y badges */
    --bg-body: rgba(241, 245, 249, 0.8);

    --text: #1e293b;            /* Gris pizarra oscuro y suave para evitar contraste agresivo */
    --text-main: #1e293b;
    --text-muted: #64748b;

    --border-color: rgba(148, 163, 184, 0.15); /* Borde pizarra más suave y elegante */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(148, 163, 184, 0.1);

    /* Semantic: Primary */
    --primary-bg:     rgba(2, 132, 199, 0.08);
    --primary-border: rgba(2, 132, 199, 0.2);
    --primary-alpha:  rgba(2, 132, 199, 0.06);
    --primary-gradient: linear-gradient(135deg, #0284c7, #2563eb);
    --shadow-primary: 0 4px 14px rgba(2, 132, 199, 0.25);

    /* Semantic: Success */
    --success:          #059669;
    --success-bg:       rgba(16, 185, 129, 0.07);
    --success-border:   rgba(16, 185, 129, 0.18);
    --success-gradient: linear-gradient(135deg, #10b981, #059669);
    --shadow-success:   0 4px 14px rgba(16, 185, 129, 0.22);

    /* Semantic: Warning */
    --warning:        #d97706;
    --warning-bg:     rgba(245, 158, 11, 0.07);
    --warning-border: rgba(245, 158, 11, 0.2);

    /* Semantic: Danger */
    --danger:         #dc2626;
    --danger-bg:     rgba(239, 68, 68, 0.07);
    --danger-border: rgba(239, 68, 68, 0.18);

    /* Misc */
    --surface-subtle: rgba(99, 102, 241, 0.05);
    --whatsapp: #25d366;

    --shadow-sm: 0 1px 3px 0 rgba(99, 102, 241, 0.06), 0 1px 2px -1px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px -1px rgba(99, 102, 241, 0.1), 0 2px 6px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 24px -4px rgba(99, 102, 241, 0.12), 0 4px 8px -2px rgba(0,0,0,0.06);

    /* Dynamic Support Chat Variables */
    --chat-outer-bg: #f8fafc;
    --chat-header-bg: #f1f5f9;
    --chat-search-bg: #ffffff;
    --chat-meta-bg: #f1f5f9;
    --chat-input-bar-bg: #f8fafc;
    --chat-input-bg: #ffffff;
    --chat-button-bg: #e2e8f0;
    --chat-canned-bg: #ffffff;
    --chat-canned-border: rgba(99, 102, 241, 0.15);
    --chat-bubble-incoming: #ffffff;
    --chat-date-bg: rgba(99, 102, 241, 0.08);
    --chat-date-text: var(--primary);
    --chat-option-hover: rgba(99, 102, 241, 0.06);
    --chat-status-btn-bg: #f1f5f9;
    --chat-status-btn-hover: #e2e8f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-base);
    color: var(--text-main);
    line-height: 1.5;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

.hidden { display: none !important; }

/* ===================== BUTTONS ===================== */
.btn-primary {
    background: var(--primary, #0284c7);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: none !important;
}
.btn-primary:hover {
    background: var(--primary-hover, #0369a1);
    transform: translateY(-1px);
    box-shadow: none !important;
    filter: none !important;
}

.btn-ghost {
    color: var(--text-main);
    background: var(--bg-surface-light);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.btn-ghost:hover {
    background: var(--border-color);
    color: var(--primary);
}

/* ===================== LOGIN ===================== */
#login-view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-image: url('../assets/hacker-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#login-view::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
    z-index: 1;
}

.login-bg-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 40%),
                radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.15), transparent 40%);
}

.login-card {
    position: relative;
    z-index: 10;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 3rem 2.5rem;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.logo-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -0.02em;
}
.login-brand span { color: var(--primary, #0284c7) !important; }
.login-tagline { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65) !important; font-weight: 500; }

.login-title { 
    font-size: 1.85rem; 
    font-weight: 800; 
    margin-bottom: 0.4rem; 
    color: #ffffff !important;
    letter-spacing: -0.03em;
}
.login-subtitle { 
    color: rgba(255, 255, 255, 0.7) !important; 
    margin-bottom: 2rem; 
    font-size: 0.95rem;
}

.login-card .form-group { margin-bottom: 1.5rem; }
.login-card .form-group label { 
    display: block; 
    font-size: 0.875rem; 
    font-weight: 600; 
    margin-bottom: 0.5rem; 
    color: rgba(255, 255, 255, 0.85) !important; 
}

.login-card .input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-card .input-icon-wrap > i, 
.login-card .input-icon-wrap > svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5) !important;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: color 0.2s ease;
}
.login-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .login-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .login-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 3rem !important;
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    outline: none;
    font-size: 0.95rem !important;
    transition: all 0.2s ease;
}
.login-card .input-icon-wrap input::placeholder,
[data-theme="light"] .login-card .input-icon-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.login-card .input-icon-wrap input:focus,
[data-theme="light"] .login-card .input-icon-wrap input:focus,
[data-theme="dark"] .login-card .input-icon-wrap input:focus {
    border-color: var(--primary, #0284c7) !important;
    background: rgba(15, 23, 42, 0.9) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}
.login-card .input-icon-wrap input:focus + i,
.login-card .input-icon-wrap input:focus ~ i {
    color: var(--primary, #0284c7) !important;
}

.login-card .toggle-pass {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.login-card .toggle-pass svg, 
.login-card .toggle-pass i {
    width: 20px;
    height: 20px;
}
.login-card .toggle-pass:hover { color: #ffffff !important; }

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover, 
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:active,
.login-card input:autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important;
    box-shadow: 0 0 0px 1000px #1e293b inset !important;
    transition: background-color 5000s ease-in-out 0s;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
}

.login-footer-note {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.82rem;
    margin-top: 2rem;
    text-align: center;
}

.btn-login {
    width: 100%;
    background: var(--primary, #0284c7);
    color: white;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: none !important;
    filter: none !important;
}
.btn-login:hover { 
    transform: translateY(-1px); 
    background: var(--primary-hover, #0369a1); 
    box-shadow: none !important; 
    filter: none !important;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.login-footer-note {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ===================== DASHBOARD LAYOUT ===================== */
#dashboard-view {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 270px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 100;
}

.sidebar.collapsed { width: 80px; }
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .nav-btn span, 
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-badge { display: none; }

/* ── Stagger entrance when sidebar expands ── */
@keyframes nav-text-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sidebar.is-expanding .nav-btn span,
.sidebar.is-expanding .nav-section-label,
.sidebar.is-expanding .sidebar-brand,
.sidebar.is-expanding .sa-unified,
.sidebar.is-expanding .nav-badge {
    animation: nav-text-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger delay per nav item (nth-child on nav-btn) */
.sidebar.is-expanding .nav-btn:nth-child(1) span  { animation-delay: 0.05s; }
.sidebar.is-expanding .nav-btn:nth-child(2) span  { animation-delay: 0.08s; }
.sidebar.is-expanding .nav-btn:nth-child(3) span  { animation-delay: 0.11s; }
.sidebar.is-expanding .nav-btn:nth-child(4) span  { animation-delay: 0.14s; }
.sidebar.is-expanding .nav-btn:nth-child(5) span  { animation-delay: 0.17s; }
.sidebar.is-expanding .nav-btn:nth-child(6) span  { animation-delay: 0.20s; }
.sidebar.is-expanding .nav-btn:nth-child(7) span  { animation-delay: 0.23s; }
.sidebar.is-expanding .nav-btn:nth-child(8) span  { animation-delay: 0.26s; }
.sidebar.is-expanding .nav-btn:nth-child(9) span  { animation-delay: 0.29s; }
.sidebar.is-expanding .nav-btn:nth-child(10) span { animation-delay: 0.32s; }
.sidebar.is-expanding .nav-section-label          { animation-delay: 0.04s; }
.sidebar.is-expanding .sidebar-brand              { animation-delay: 0.02s; }
.sidebar.is-expanding .sa-unified                 { animation-delay: 0.18s; }

.sidebar-header {
    height: 70px;
    flex-shrink: 0;
    padding: 0 1rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 0; }

.sidebar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; min-width: 0; flex: 1; }
.sidebar-brand span { color: var(--primary); }
.brand-text { white-space: nowrap; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand-icon { width: 32px; height: 32px; flex-shrink: 0; }
.brand-icon svg, .logo-icon-wrap svg { display: none; /* Oculto por defecto para evitar parpadeos */ }

.sidebar-toggle-btn { color: var(--text-muted); transition: color 0.2s, background 0.2s; flex-shrink: 0; margin-left: auto; padding: 0.35rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sidebar-toggle-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.sidebar-toggle-btn svg { transition: transform 0.3s ease; }
/* El botón debe permanecer visible para volver a expandir */
.sidebar.collapsed .sidebar-toggle-btn { display: flex; margin: 0 auto; padding: 1rem 0; }
.sidebar.collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.nav-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 1.5rem 0 0.5rem 0.5rem;
    font-weight: 600;
}
.sidebar-nav > .nav-section-label:first-child { margin-top: 0; }

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0.25rem;
    position: relative;
    border: 1px solid transparent;
}
.nav-btn i, .nav-btn svg { width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sidebar.collapsed .nav-btn { justify-content: center; padding: 0.75rem; }

.nav-btn:hover {
    background: var(--bg-surface-light);
    color: var(--text-main);
    padding-left: 1.25rem; /* Efecto micro-deslizamiento horizontal */
}
.nav-btn:hover i, .nav-btn:hover svg {
    transform: scale(1.1);
}

.nav-btn.active {
    background: var(--primary-alpha) !important;
    color: var(--primary) !important;
    font-weight: 700;
    padding-left: 1.5rem; /* Mayor deslizamiento cuando está activo */
    border-color: var(--primary-border);
    box-shadow: 0 4px 12px -2px var(--primary-alpha);
}
.nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--primary);
    border-radius: 99px;
    box-shadow: 0 0 8px var(--primary);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar.collapsed .nav-btn.active::before { left: 0.25rem; }

.nav-badge {
    margin-left: auto;
    background: var(--primary-alpha);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 6px var(--primary-alpha);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
}
.nav-btn:hover .nav-badge {
    background: var(--primary);
    color: white;
    box-shadow: 0 0 10px var(--primary);
    transform: scale(1.1);
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar.collapsed .sidebar-footer { justify-content: center; padding: 1rem 0.5rem; }

/* Super Admin footer: pill is centered */
.sidebar-footer.sa-footer-unified {
    justify-content: center;
    padding: 0.75rem 1rem;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.user-name { font-weight: 600; font-size: 0.875rem; }
.user-role { font-size: 0.75rem; color: var(--text-muted); }

.logout-btn { color: var(--text-muted); padding: 0.5rem; border-radius: 8px; }
.logout-btn:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.sidebar.collapsed .user-pill { display: none !important; }
.sidebar.collapsed .logout-btn { display: block; margin: 0 auto; }

/* MAIN CONTENT */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topbar {
    height: 70px;
    flex-shrink: 0;
    background: var(--bg-surface);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 10;
}

.topbar-left { display: flex; align-items: center; gap: 1rem; }
.mobile-menu-btn { display: none; color: var(--text-main); }
.topbar-breadcrumb { font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-root { color: var(--text-muted); }
.topbar-breadcrumb i { width: 14px; height: 14px; color: var(--text-muted); }

.topbar-right { display: flex; align-items: center; gap: 1rem; position: relative; }
.topbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    position: relative;
    transition: background 0.2s;
}
.topbar-btn:hover { background: var(--border-color); }
.topbar-btn i { width: 18px; height: 18px; }

.notif-dot {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--bg-surface-light);
}

.topbar-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
}

/* TAB CONTENT */
.tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}
.page-title { font-size: 1.875rem; font-weight: 800; margin-bottom: 0.25rem; }
.page-subtitle { color: var(--text-muted); }

/* DASHBOARD KPIs & GRIDS */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-icon i { width: 24px; height: 24px; }

.kpi-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.kpi-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.kpi-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.kpi-orange { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.kpi-info { 
    display: flex;
    flex-direction: column;
}
.kpi-value { font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--text-main); }
.kpi-label { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 500; }

@media (min-width: 769px) {
    .client-kpi-card {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 1.15rem !important;
        row-gap: 0.2rem !important;
        padding: 1.5rem !important;
    }
    .client-kpi-card .kpi-top-row {
        display: contents !important;
    }
    .client-kpi-card .kpi-icon {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 48px !important;
        height: 48px !important;
    }
    .client-kpi-card .kpi-value {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 1.85rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }
    .client-kpi-card .kpi-label {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.875rem !important;
        color: var(--text-muted) !important;
        margin: 0 !important;
        font-weight: 500 !important;
    }
}

.kpi-trend {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}
.kpi-trend.up { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.kpi-trend.neutral { background: var(--bg-surface-light); color: var(--text-muted); }

/* SECTIONS */
.section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.section-card-header h3 { font-size: 1.25rem; font-weight: 700; }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-surface-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--text-muted);
}
.empty-icon i { width: 32px; height: 32px; }
.empty-state h4 { font-size: 1.25rem; color: var(--text-main); margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1.5rem; }

/* CHART FIX */
canvas {
    max-width: 100% !important;
}

/* UTILS */
.search-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.search-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
    transition: all 0.3s ease;
}
.search-wrap i, .search-wrap svg {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    transition: color 0.3s ease;
    pointer-events: none;
}
.search-wrap input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.8rem;
    background: var(--bg-surface-light);
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--text-main);
    outline: none;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.search-wrap input:focus { 
    border-color: var(--primary); 
    background: var(--bg-surface);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.search-wrap:focus-within i, .search-wrap:focus-within svg {
    color: var(--primary);
}

.filter-pills { display: flex; gap: 0.5rem; }
.pill {
    padding: 0.4rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: all 0.2s;
}
.pill:hover { background: var(--bg-surface-light); }
.pill.active { background: var(--primary); color: white; border-color: var(--primary); }

/* GRIDS & LISTS */
.businesses-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modules-grid, .modules-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

/* LIST ITEM (Filas horizontales para negocios) */
.biz-list-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color); /* fallback por defecto */
    border-radius: 14px;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.biz-list-item.status-active {
    border-left: 4px solid var(--success);
}
.biz-list-item.status-inactive {
    border-left: 4px solid var(--danger);
}
.biz-list-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
    border-left-color: var(--primary);
}
.biz-info-main { flex: 2; display: flex; flex-direction: column; min-width: 200px; }
.biz-info-main .biz-name { font-weight: 700; font-size: 1.1rem; color: var(--text-main); margin-bottom: 0.2rem; }
.biz-info-main .biz-type { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.biz-info-city { flex: 1.5; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); min-width: 120px; }
.biz-info-city svg, .biz-info-city i { width: 14px; height: 14px; }
.biz-info-modules { flex: 2; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.biz-info-status { flex: 1; display: flex; justify-content: center; min-width: 100px; }
.biz-actions { flex: 1; display: flex; justify-content: flex-end; min-width: 120px; }

/* Placeholder de Agregar Tarjeta en el Wallet */
.cc-add-card-slot {
    width: 320px;
    height: 200px;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    border: 2px dashed var(--primary);
    background: var(--bg-surface-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.cc-add-card-slot:hover {
    border-color: var(--primary);
    background: var(--primary-alpha);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.cc-add-card-slot:hover .add-btn-circle {
    transform: scale(1.15);
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
}

/* Elementos internos del placeholder de tarjeta */
.cc-add-card-slot .cc-chip-mock {
    width: 42px;
    height: 30px;
    border-radius: 6px;
    border: 2px solid var(--primary-border);
    background: var(--primary-alpha);
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
}

.cc-add-card-slot .cc-chip-mock-inner {
    width: 20px;
    height: 14px;
    border: 1px solid var(--primary-border);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.cc-add-card-slot .cc-brand-mock {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--primary);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.cc-add-card-slot .cc-holder-bar {
    width: 100px;
    height: 10px;
    background: var(--primary-border);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.cc-add-card-slot .add-btn-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid var(--primary-border);
}

.cc-add-card-slot .cc-overlay-btn-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(0.5px);
    gap: 0.75rem;
}

/* En tema oscuro, un fondo un poco más opaco para el overlay */
[data-theme="dark"] .cc-add-card-slot .cc-overlay-btn-wrap {
    background: rgba(15, 23, 42, 0.2);
}

/* Ajustes de hover para elementos del chip y marca */
.cc-add-card-slot:hover .cc-chip-mock {
    border-color: var(--primary);
}
.cc-add-card-slot:hover .cc-chip-mock-inner {
    border-color: var(--primary);
}
.cc-add-card-slot:hover .cc-brand-mock {
    opacity: 0.9;
}
.cc-add-card-slot:hover .cc-holder-bar {
    background: var(--primary);
}

/* REsponsive para la lista */
@media (max-width: 900px) {
    .biz-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .biz-actions, .biz-info-status { width: 100%; justify-content: flex-start; }
    .biz-info-status { justify-content: flex-start; }
}

/* DROPDOWN MENUS */
.dropdown { position: relative; }
.btn-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all 0.2s; }
.btn-icon:hover { background: var(--bg-surface-light); color: var(--text-main); }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 0.5rem;
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
}
.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown-item {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-main);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 500;
}
.dropdown-item:hover { 
    background: var(--primary-alpha); 
    color: var(--primary);
}
.dropdown-item svg, .dropdown-item i { width: 16px; height: 16px; }
.dropdown-item:hover svg, .dropdown-item:hover i { color: var(--primary); }
.dropdown-divider { height: 1px; background: var(--border-color); margin: 0.4rem 0; }
.text-danger { color: var(--danger) !important; }
.dropdown-item.text-danger:hover { background: rgba(239, 68, 68, 0.08) !important; color: var(--danger) !important; }

/* CARDS */
.biz-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.biz-card:hover { border-color: var(--primary-border); }
.biz-header { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.biz-name { font-weight: 700; font-size: 1.125rem; }
.biz-type { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    white-space: nowrap;
}
.status-badge.active { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.status-badge.inactive { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

.biz-details { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.biz-details p { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.biz-details i { width: 14px; height: 14px; }

.biz-modules { display: flex; gap: 0.5rem; }
.module-chip {
    background: var(--primary-alpha);
    border: 1px solid var(--primary-border);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 6px var(--primary-alpha);
    cursor: pointer;
}
.module-chip:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-alpha);
}
.module-chip[title="Módulos en suspensión"] {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.1);
}
.module-chip[title="Módulos en suspensión"]:hover {
    background: #f59e0b !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}
.module-chip i { width: 13px; height: 13px; }

/* MODALS */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}
.modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay:not(.hidden) .modal-box {
    transform: scale(1) translateY(0);
}
.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-header h3 { font-size: 1.25rem; font-weight: 700; }
.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: rotate(90deg);
}

.modal-close i { width: 18px; height: 18px; }
.modal-form { 
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}
.form-content-scroll {
    padding: 1.5rem;
    flex: 1;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-actions {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--bg-surface);
    flex-shrink: 0;
}

/* BIZ TYPE GRID */
.biz-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.biz-type-option {
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    padding: 0.75rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.biz-type-option:hover { border-color: var(--primary); }
.biz-type-option.selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}
.biz-type-option span { font-size: 1.5rem; display: block; margin-bottom: 0.25rem; }
.biz-type-option div { font-size: 0.75rem; font-weight: 600; }

/* TOAST */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.toast {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideInRight 0.3s forwards;
    border-left: 4px solid var(--primary);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--info); }
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
    to { opacity: 0; }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99990;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .sidebar-backdrop.active {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Layout & Sidebar */
    .sidebar,
    .sidebar.collapsed { 
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: translateX(-100%) !important; 
        height: 100vh !important; 
        z-index: 99999 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 280px !important;
        max-width: 85vw !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-surface) !important;
    }
    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open { 
        transform: translateX(0) !important; 
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.7) !important;
    }

    #dashboard-view.hidden .sidebar,
    #dashboard-view.hidden .sidebar.mobile-open,
    #dashboard-view.hidden .sidebar.collapsed.mobile-open {
        display: none !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
    }

    #dashboard-view.hidden .sidebar-backdrop,
    #dashboard-view.hidden .sidebar-backdrop.active {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .sidebar.collapsed .brand-text,
    .sidebar.collapsed .nav-btn span,
    .sidebar.collapsed .nav-section-label,
    .sidebar.collapsed .user-pill {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .sidebar.collapsed .nav-section-label {
        display: block !important;
    }
    .sidebar.collapsed .sidebar-header {
        justify-content: space-between !important;
    }
    .sidebar.collapsed .nav-btn {
        justify-content: flex-start !important;
        padding: 0.75rem 1rem !important;
    }
    
    .mobile-menu-btn { 
        display: flex !important; 
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg-surface-light);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        color: var(--primary);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-menu-btn:hover {
        background: var(--primary-alpha);
        border-color: var(--primary-border);
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
    }

    /* Topbar adjustments - Sticky header nativo: baja con pull-to-refresh y se ancla al scrollear */
    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        flex-shrink: 0 !important;
        background: var(--bg-surface) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-sizing: border-box !important;
        gap: 0.75rem;
    }
    .topbar-left {
        gap: 0.5rem;
    }
    .topbar-breadcrumb .breadcrumb-root,
    .topbar-breadcrumb svg,
    .topbar-breadcrumb i,
    .breadcrumbs span,
    .breadcrumbs svg,
    .breadcrumbs i {
        display: none !important;
    }
    .topbar-breadcrumb #topbar-page-name,
    .breadcrumbs strong {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
    }

    /* Grids & Cards */
    .kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }
    .kpi-card,
    .client-kpi-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 0.9rem 0.8rem !important;
        gap: 0.55rem !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    .client-kpi-card .kpi-top-row,
    .kpi-card .kpi-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .kpi-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .kpi-icon i,
    .kpi-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .kpi-value {
        font-size: 1.65rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        color: var(--text-main) !important;
        margin-right: 0.2rem !important;
    }
    .kpi-label {
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .client-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .form-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Table Responsiveness Wrapper */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .data-table {
        min-width: 600px;
    }

    /* Search and filters stack */
    .search-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    .search-wrap {
        width: 100% !important;
    }
    .filter-pills {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 4px;
    }
    .filter-pills::-webkit-scrollbar {
        height: 4px;
    }


    .modal-header-modern {
        padding: 1.25rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .modal-actions-modern {
        padding: 1.25rem !important;
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
    }
    .modal-actions-modern button {
        width: 100% !important;
        justify-content: center !important;
    }
    .btn-save-modern {
        width: 100% !important;
    }
    
    /* Swal alert optimization */
    .swal2-popup {
        width: 95% !important;
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }
}

/* DYNAMIC WIDGETS REFACTOR */
.businesses-quick-list { display: flex; flex-direction: column; gap: 1rem; }
.biz-quick-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; border: 1px solid var(--border-color); border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.biz-quick-item:hover {
    background: rgba(99, 102, 241, 0.05);
    border-color: var(--primary);
    transform: translateX(4px);
}
.biz-quick-info { display: flex; align-items: center; gap: 1rem; }
.biz-quick-icon {
    width: 40px; height: 40px; background: var(--bg-surface-light);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: var(--primary);
}
.biz-quick-name { font-weight: 600; }
.biz-quick-city { font-size: 0.75rem; color: var(--text-muted); }

.quick-module-card {
    display: flex; align-items: center; gap: 1rem; padding: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-module-card:hover {
    background: rgba(99, 102, 241, 0.05);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}
.quick-module-icon {
    width: 48px; height: 48px; background: rgba(99,102,241,0.1);
    color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.quick-module-name { font-weight: 600; }
.quick-module-price { font-size: 0.75rem; color: var(--text-muted); }

.module-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.module-icon-large {
    width: 48px; height: 48px; background: var(--bg-surface-light);
    color: var(--text-main); border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.module-title { font-weight: 700; margin-bottom: 0.5rem; }
.module-desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; }
.module-price { font-weight: 600; color: var(--primary); }

.custom-checkbox-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; }
.custom-checkbox-label input { accent-color: var(--primary); }

/* Config Navigation Buttons */
.config-nav-btn {
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.2s ease;
}

.config-nav-btn.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.config-nav-btn:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: var(--text-color);
    box-shadow: none !important;
    transform: none !important;
}

/* MODERN DATA TABLE */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table th {
    text-align: left;
    padding: 1.25rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid var(--border-color);
}
.data-table td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
    color: var(--text-main);
}
.data-table tr:hover td { 
    background: rgba(255, 255, 255, 0.02); 
}
.data-table tr:last-child td { border-bottom: none; }

/* USER AVATAR */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* FORM ENHANCEMENTS & UNIVERSAL INPUT STYLES */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    width: 100%;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--text-main);
}


/* Modal Inputs & Dashboard Inputs (Dark Theme by default) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]),
.modal-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]),
.biz-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]),
.settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    background: var(--bg-surface-light, rgba(30, 41, 59, 0.7)) !important;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 12px !important;
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-family) !important;
    font-size: 0.92rem !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    height: 44px !important;
}

.form-group input:not([type="range"]):focus,
.modal-form input:not([type="range"]):focus,
.biz-card input:not([type="range"]):focus,
.settings-section input:not([type="range"]):focus {
    border-color: var(--primary, #0284c7) !important;
    background: var(--bg-surface, rgba(15, 23, 42, 0.9)) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(2, 132, 199, 0.2)) !important;
}

.form-group input::placeholder,
.modal-form input::placeholder,
.biz-card input::placeholder,
.settings-section input::placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.4)) !important;
}

/* Input Icon Wrap in Dashboard & Settings */
.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Ícono posicionado absolutamente dentro del wrap */
.input-icon-wrap > i,
.input-icon-wrap > svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

/* Cambia color del ícono cuando el input dentro recibe foco (ícono viene ANTES del input) */
.input-icon-wrap:focus-within > i,
.input-icon-wrap:focus-within > svg {
    color: var(--primary, #0284c7) !important;
}

/*  
    Selector con mayor especificidad que .form-group input:not(x5) (0,6,1)
    para garantizar que padding-left: 2.85rem siempre gane.
    Especificidad de este selector: (0,7,1) → siempre gana
*/
.form-group .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.form-group-modern .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.biz-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.modal-form .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.modal-form .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.modern-modal .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.input-icon-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.input-modern-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
.input-icon-wrap input,
.input-modern-wrap input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem 0.75rem 2.85rem !important;
    padding-left: 2.85rem !important;
    background: var(--bg-surface-light, rgba(30, 41, 59, 0.7)) !important;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 12px !important;
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-family) !important;
    font-size: 0.92rem !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    height: 44px !important;
}

.input-icon-wrap input:focus,
.input-modern-wrap input:focus {
    border-color: var(--primary, #0284c7) !important;
    background: var(--bg-surface, rgba(15, 23, 42, 0.9)) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(2, 132, 199, 0.2)) !important;
}

.btn-toggle-eye {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    z-index: 5;
}

.btn-toggle-eye:hover {
    color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.1);
}

.btn-toggle-eye i,
.btn-toggle-eye svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.form-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    transition: all 0.2s;
}
.form-group select:focus {
    border-color: var(--primary);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.toggle-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-card label { margin-bottom: 0; color: var(--text-main); }

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--bg-surface-light);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid var(--border-color);
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: .4s;
    border-radius: 50%;
}
input:checked + .toggle-slider { background-color: var(--primary); border-color: var(--primary); }
input:checked + .toggle-slider:before { transform: translateX(24px); background-color: white; }

.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* ===================== SWEETALERT2 PREMIUM GLASS ===================== */
.swal2-popup {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary-alpha) !important;
    font-family: var(--font-family) !important;
}

.swal2-title {
    color: var(--text-main) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    overflow-x: hidden !important;
}

.swal2-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 0.25rem !important;
    box-sizing: border-box !important;
}

/* SweetAlert2 Visibility Guard */
.swal2-styled.swal2-confirm[style*="display: none"],
.swal2-confirm[style*="display: none"],
.swal2-styled.swal2-cancel[style*="display: none"],
.swal2-cancel[style*="display: none"],
.swal2-styled.swal2-deny[style*="display: none"],
.swal2-deny[style*="display: none"],
.swal2-actions[style*="display: none"] {
    display: none !important;
}

.swal2-styled.swal2-confirm:not([style*="display: none"]),
.swal2-confirm:not([style*="display: none"]) {
    flex: 0 1 auto !important;
    min-width: 125px !important;
    max-width: 170px !important;
    margin: 0 !important;
    background: var(--primary, #0284c7) !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    padding: 0.65rem 1.3rem !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.swal2-confirm:hover {
    transform: translateY(-1px) !important;
    background: var(--primary-hover, #0369a1) !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Soporte para botones de peligro/eliminar en Swal */
.swal2-popup .swal2-styled.swal2-confirm[style*="background-color: rgb(239, 68, 68)"],
.swal2-popup .swal2-styled.swal2-confirm[style*="background-color: #ef4444"] {
    background: #ef4444 !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-styled.swal2-confirm[style*="background-color: rgb(239, 68, 68)"]:hover,
.swal2-popup .swal2-styled.swal2-confirm[style*="background-color: #ef4444"]:hover {
    background: #dc2626 !important;
    box-shadow: none !important;
    filter: none !important;
}

.swal2-styled.swal2-cancel:not([style*="display: none"]),
.swal2-cancel:not([style*="display: none"]) {
    flex: 0 1 auto !important;
    min-width: 125px !important;
    max-width: 170px !important;
    margin: 0 !important;
    background: var(--bg-surface-light) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.25s ease !important;
    padding: 0.65rem 1.3rem !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.swal2-cancel:hover {
    background: var(--primary-alpha) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary) !important;
}

[data-theme="light"] .swal2-cancel {
    background: #f0f4fa !important;
    color: #64748b !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
}

[data-theme="light"] .swal2-cancel:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--primary) !important;
}

.swal2-close {
    color: var(--text-muted) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.swal2-close:hover {
    color: #ef4444 !important;
}

/* Modal de Demostración en Marketplace */
.demo-options-modal {
    position: relative !important;
    padding: 1.8rem 1.25rem 1.4rem 1.25rem !important;
    border-radius: 24px !important;
}

.demo-options-modal .swal2-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.demo-options-modal .swal2-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
    transform: scale(1.05) !important;
}

.demo-options-modal .swal2-title {
    padding: 0 2.2rem !important;
    margin: 0.25rem 0 0.5rem 0 !important;
    font-size: 1.22rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Disposición responsiva de credenciales del demo modal (fila en PC, columna en móvil) */
.demo-credentials-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.demo-credentials-row .demo-credential-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--bg-surface-light) !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .demo-credentials-row {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    .demo-credentials-row .demo-credential-chip {
        width: 100% !important;
        flex: none !important;
    }
}

/* ============================================================
   Demo Modal — Estilos unificados (index.html + client-dashboard.html)
   Migrado desde bloque <style> inline de index.html el 2026-09-11
   ============================================================ */

.demo-popup-container {
    font-family: 'Outfit', sans-serif;
    text-align: left;
    padding: 0.2rem;
}

.demo-modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0f172a 0%, #0284c7 50%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: block;
    letter-spacing: -0.5px;
    padding: 0.5rem 2.5rem 0 2.5rem;
    line-height: 1.3;
}

.demo-modal-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
    line-height: 1.5;
    font-weight: 400;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.demo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.demo-card {
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    border-radius: 20px;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.025);
    position: relative;
    overflow: hidden;
}

.demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.demo-card.client:hover::before {
    background: linear-gradient(90deg, #0284c7, #2563eb);
}

.demo-card.admin:hover::before {
    background: linear-gradient(90deg, #0284c7, #0369a1);
}

.demo-card:hover {
    transform: translateY(-4px);
    border-color: #e2e8f0;
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.08);
}

.demo-icon-wrapper {
    padding: 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: transform 0.3s ease;
}

.demo-card:hover .demo-icon-wrapper {
    transform: scale(1.08) rotate(2deg);
}

.demo-card.client .demo-icon-wrapper {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.demo-card.admin .demo-icon-wrapper {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

.demo-card-title {
    margin: 0 0 0.45rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-card-desc {
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.45;
    margin: 0 0 1.25rem 0;
}

.demo-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.demo-btn-outline {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
}

.demo-btn-outline:hover {
    background: #f8fafc;
    border-color: #8b5cf6;
    color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
}

.demo-btn-solid {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
}

.demo-btn-solid:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
    transform: translateY(-1px);
}

.demo-credentials-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 1.1rem;
    border: 1px solid #e2e8f0;
    margin-top: 1.25rem;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}

.demo-credentials-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.9rem;
}

.demo-credentials-header svg {
    color: #8b5cf6;
}

.demo-credential-label {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-credential-value {
    color: #0f172a;
    font-size: 0.88rem;
    font-family: 'Montserrat', monospace;
    font-weight: 600;
}

.demo-copy-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.demo-copy-btn:hover {
    background: #f1f5f9;
    color: #8b5cf6;
}

.success-checkmark-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    animation: popScale 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes popScale {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.swal2-icon {
    border-color: var(--border-color) !important;
}

/* SweetAlert2 input elements, selects and .pro-input theme styling override */
.swal2-popup .swal2-input, 
.swal2-popup .swal2-select,
.swal2-popup .swal2-textarea,
.swal2-popup select.swal2-input,
.swal2-popup input.swal2-input,
.swal2-popup .pro-input {
    background-color: var(--bg-surface-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.swal2-popup .swal2-input:focus, 
.swal2-popup .swal2-select:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup select.swal2-input:focus,
.swal2-popup input.swal2-input:focus,
.swal2-popup .pro-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha) !important;
    outline: none !important;
}

/* Ensure dropdown options have proper colors in both dark and light mode inside Swal */
.swal2-popup select.swal2-input option,
.swal2-popup .swal2-select option,
.swal2-popup .pro-input option {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

/* SweetAlert2 Light Mode Adjustments */
[data-theme="light"] .swal2-popup {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.08), 0 10px 10px -5px rgba(99, 102, 241, 0.04) !important;
}

[data-theme="light"] .swal2-title {
    color: #0f172a !important;
}

[data-theme="light"] .swal2-html-container {
    color: #475569 !important;
}

[data-theme="light"] .swal2-popup .swal2-input,
[data-theme="light"] .swal2-popup .swal2-select,
[data-theme="light"] .swal2-popup .swal2-textarea,
[data-theme="light"] .swal2-popup select.swal2-input,
[data-theme="light"] .swal2-popup input.swal2-input,
[data-theme="light"] .swal2-popup .pro-input {
    background-color: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="light"] .swal2-popup .swal2-input:focus,
[data-theme="light"] .swal2-popup .swal2-select:focus,
[data-theme="light"] .swal2-popup .swal2-textarea:focus,
[data-theme="light"] .swal2-popup select.swal2-input:focus,
[data-theme="light"] .swal2-popup input.swal2-input:focus,
[data-theme="light"] .swal2-popup .pro-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha) !important;
}

[data-theme="light"] .swal2-popup select.swal2-input option,
[data-theme="light"] .swal2-popup .swal2-select option,
[data-theme="light"] .swal2-popup .pro-input option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Launchpad / Active Modules Modal Elements */
.launch-link-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border-color); 
    background: var(--bg-surface-light);
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    position: relative;
}
.launch-link-btn:hover {
    background: var(--primary-alpha);
    border-color: var(--primary-border);
    box-shadow: none !important;
    transform: translateY(-1px);
}
.launch-link-btn .btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.launch-link-btn .btn-text {
    text-align: left;
    overflow: hidden;
}
.launch-link-btn .btn-text small {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dynamic colors for link buttons icons */
.launch-link-btn .btn-icon.public-portal {
    background: var(--primary-alpha);
    border: 1px solid var(--primary-border);
    color: var(--primary);
}
.launch-link-btn .btn-icon.admin-portal {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #10b981;
}

.cred-box {
    background: var(--bg-surface-light);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.cred-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.65rem;
}
.cred-row:last-child { margin-bottom: 0; }
.cred-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 85px;
}
.cred-value {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.04em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    background: var(--primary-alpha);
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--primary-border);
    box-sizing: border-box;
}
.copy-btn.icon-only-copy,
.copy-btn {
    background: var(--primary-alpha);
    border: 1px solid var(--primary-border);
    color: var(--primary);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.copy-btn.icon-only-copy:hover,
.copy-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-1px);
}
.warn-box {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.01) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px; padding: 1rem; margin-top: 0.5rem;
}
.warn-box p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.warn-box i { color: #fbbf24; flex-shrink: 0; }
.warn-box strong { color: #fbbf24; }

.configured-check {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 1.25rem; font-size: 0.9rem;
    color: #34d399; 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25); padding: 0.75rem;
    border-radius: 8px; cursor: pointer; font-weight: 600;
    transition: 0.2s;
}
.configured-check:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    box-shadow: none !important;
}

/* Light mode overrides for launchpad items */
[data-theme="light"] .launch-link-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .launch-link-btn:hover {
    background: var(--primary-alpha) !important;
    border-color: var(--primary-border) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .launch-link-btn .btn-icon.public-portal {
    background: var(--primary-bg) !important;
    color: var(--primary) !important;
}
[data-theme="light"] .launch-link-btn .btn-icon.admin-portal {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #059669 !important;
}
[data-theme="light"] .cred-box {
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .cred-label {
    color: #64748b !important;
}
[data-theme="light"] .cred-value {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
[data-theme="light"] .copy-btn.icon-only-copy,
[data-theme="light"] .copy-btn {
    background: var(--primary-alpha, rgba(99, 102, 241, 0.08)) !important;
    border: 1px solid var(--primary-border, rgba(99, 102, 241, 0.2)) !important;
    color: var(--primary) !important;
}
[data-theme="light"] .copy-btn.icon-only-copy:hover,
[data-theme="light"] .copy-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}
[data-theme="light"] .warn-box {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
}
[data-theme="light"] .warn-box p {
    color: #b45309 !important;
}
[data-theme="light"] .warn-box p strong {
    color: #d97706 !important;
}
[data-theme="light"] .configured-check {
    background: var(--primary-alpha) !important;
    border: 1px dashed var(--primary-border) !important;
    color: var(--primary) !important;
}
[data-theme="light"] .configured-check:hover {
    background: var(--primary-bg) !important;
    border-style: solid !important;
}

.modal-session-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.modal-session-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}
[data-theme="light"] .modal-session-logout-btn {
    background: #fef2f2;
    color: #dc2626;
    border: 1px dashed #fca5a5;
}
[data-theme="light"] .modal-session-logout-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.modal-btn-cancel {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0.6rem 1.5rem !important;
    transition: all 0.2s !important;
}
.modal-btn-cancel:hover {
    background: var(--bg-surface-light) !important;
    color: var(--text-main) !important;
}
[data-theme="light"] .modal-btn-cancel {
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
}
[data-theme="light"] .modal-btn-cancel:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--primary) !important;
}

/* ===================== NOTIFICATIONS DROPDOWN ===================== */
.notifications-dropdown {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: 380px;
    max-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-color);
    border: 1px solid var(--border-color);
    animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* FONDO SÓLIDO — sin transparencia */
    background: var(--bg-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-header {
    padding: 1.1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--bg-surface) !important;
    flex-shrink: 0;
}

.notif-clear-btn {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    transition: opacity 0.2s;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}
.notif-clear-btn:hover { 
    opacity: 0.7; 
    background: rgba(99,102,241,0.08);
}

.notif-list { 
    overflow-y: auto; 
    flex: 1;
    background: var(--bg-surface);
}

.notif-item {
    padding: 1rem 1.25rem;
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    cursor: pointer;
    align-items: flex-start;
}
[data-theme="dark"]  .notif-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .notif-item:hover { background: rgba(0,0,0,0.03); }

.notif-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notif-icon-box i { width: 16px; height: 16px; }

.notif-content { flex: 1; min-width: 0; }
.notif-title { 
    font-size: 0.875rem; 
    font-weight: 600; 
    margin-bottom: 0.2rem; 
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-desc { 
    font-size: 0.8rem; 
    color: var(--text-muted); 
    line-height: 1.4; 
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

.notif-empty { 
    padding: 3rem 2rem; 
    text-align: center; 
    color: var(--text-muted); 
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
}
.notif-empty i { width: 32px; height: 32px; opacity: 0.25; }

/* Notif count badge encima del botón de campana */
.notif-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger);
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-surface);
    line-height: 1;
}
/* ===================== MODERN MODAL PREMIUM ===================== */
.modern-modal {
    max-width: 550px !important;
    border-radius: 28px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
    padding: 0 !important;
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header-modern {
    padding: 2rem 2.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-icon {
    width: 54px;
    height: 54px;
    background: var(--primary, #0284c7);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: none !important;
}

.header-text h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.header-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.form-group-modern {
    margin-bottom: 1.5rem;
}

.form-group-modern label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 4px;
}

.input-modern-wrap {
    position: relative;
}

.input-modern-wrap .field-icon,
.input-modern-wrap > i,
.input-modern-wrap > svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.3s;
    z-index: 2;
}

.input-modern-wrap input, 
.select-modern {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.75rem 1rem 0.75rem 2.85rem !important;
    padding-left: 2.85rem !important;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box !important;
}

.input-modern-wrap textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.75rem 1rem !important;
    padding-left: 1rem !important;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box !important;
}

.input-modern-wrap input:focus, 
.input-modern-wrap textarea:focus,
.select-modern:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.input-modern-wrap:focus-within .field-icon,
.input-modern-wrap:focus-within > i,
.input-modern-wrap:focus-within > svg {
    color: var(--primary) !important;
    transform: translateY(-50%) scale(1.05);
}

.form-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.field-hint-modern {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
    padding-left: 4px;
}

.modal-actions-modern {
    padding: 1.5rem 2.5rem 2.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0,0,0,0.1);
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-save-modern {
    background: var(--primary, #0284c7);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.btn-save-modern:hover {
    transform: translateY(-1px);
    background: var(--primary-hover, #0369a1);
    box-shadow: none !important;
    filter: none !important;
}

.btn-save-modern i {
    width: 20px;
    height: 20px;
}

.select-modern {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.select-modern:hover {
    border-color: rgba(99, 102, 241, 0.5);
}

.select-modern:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.select-modern option {
    background: #0f172a;
    color: #f8fafc;
}

/* ============================================================
   AS SIERRA SYSTEMS - ULTRA MODERN CUSTOM DROPDOWN COMPONENT
============================================================ */
.as-custom-dropdown {
    position: relative;
    width: 100%;
}

.as-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--bg-surface-light, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    color: var(--text-main, #f8fafc);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.as-dropdown-trigger:hover {
    border-color: var(--primary, #3b82f6);
    background: rgba(255, 255, 255, 0.07);
}

.as-dropdown-trigger.open {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.as-dropdown-trigger .trigger-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-dropdown-trigger .trigger-icon {
    width: 18px;
    height: 18px;
    color: var(--primary, #3b82f6);
    flex-shrink: 0;
}

.as-dropdown-trigger .trigger-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.as-dropdown-trigger.open .trigger-arrow {
    transform: rotate(180deg);
}

.as-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0f172a;
    background: linear-gradient(180deg, #131d33 0%, #0b1120 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.as-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.as-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    color: var(--text-muted, #cbd5e1);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.as-dropdown-item:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #fff;
}

.as-dropdown-item.selected {
    background: rgba(59, 130, 246, 0.2);
    color: #38bdf8;
    font-weight: 700;
}

.as-dropdown-item .item-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.as-dropdown-item .item-icon {
    width: 16px;
    height: 16px;
    color: var(--primary, #3b82f6);
    flex-shrink: 0;
}

.as-dropdown-item .item-check {
    width: 15px;
    height: 15px;
    color: #38bdf8;
    flex-shrink: 0;
}

/* --- Inline Copy Icon Button --- */
.btn-copy-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted, #94a3b8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.btn-copy-icon:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.06);
}

.btn-copy-icon:active {
    transform: scale(0.94);
}

.btn-copy-icon.copied {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES — Polished Day Theme
   ========================================================================== */

/* --- Sidebar light --- */
[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
    border-right: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: 2px 0 12px rgba(99, 102, 241, 0.05);
}

[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .sidebar-footer {
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    background: rgba(99, 102, 241, 0.03);
}

[data-theme="light"] .nav-btn {
    color: #64748b;
}

[data-theme="light"] .nav-btn:hover {
    background: var(--primary-alpha);
    color: var(--primary);
}

[data-theme="light"] .nav-btn.active {
    background: var(--primary-alpha) !important;
    color: var(--primary) !important;
    font-weight: 700;
}

[data-theme="light"] .nav-btn.active::before {
    background: var(--primary);
}

[data-theme="light"] .nav-section-label {
    color: #94a3b8;
}

/* --- Topbar light --- */
[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: 0 1px 12px rgba(99, 102, 241, 0.06);
}

[data-theme="light"] .topbar-btn {
    background: #f0f4fa;
    color: #64748b;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .topbar-btn:hover {
    background: var(--primary-alpha);
    color: var(--primary-hover);
}

/* --- KPI cards light --- */
[data-theme="light"] .kpi-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .kpi-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}

/* --- Section cards light --- */
[data-theme="light"] .section-card,
[data-theme="light"] .biz-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .biz-card:hover,
[data-theme="light"] .biz-list-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}

[data-theme="light"] .biz-list-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
}

/* --- Tables light --- */
[data-theme="light"] table th {
    background: var(--bg-surface-light);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] table tr:hover td {
    background: var(--primary-alpha);
}

[data-theme="light"] table td {
    border-bottom: 1px solid var(--border-color);
}

/* --- Search + filter inputs light --- */
[data-theme="light"] .search-wrap input {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .search-wrap input::placeholder {
    color: var(--text-muted);
}

[data-theme="light"] .search-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

[data-theme="light"] .pill {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

[data-theme="light"] .pill:hover {
    background: var(--primary-alpha);
    color: var(--primary-hover);
    border-color: var(--primary-border);
}

[data-theme="light"] .pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
}

/* --- Dropdown menus light --- */
[data-theme="light"] .dropdown-menu {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .dropdown-item:hover {
    background: var(--primary-alpha);
    color: var(--primary-hover);
}

/* --- Modals light --- */
[data-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .modal-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .modal-header {
    background: linear-gradient(135deg, var(--primary-alpha) 0%, rgba(139, 92, 246, 0.02) 100%);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .modal-actions-modern {
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-light);
}

/* --- Form inputs light --- */
[data-theme="light"] .form-input-modern,
[data-theme="light"] .input-modern,
[data-theme="light"] select,
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]) {
    background-color: var(--bg-surface-light);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

[data-theme="light"] .form-input-modern:focus,
[data-theme="light"] .input-modern:focus,
[data-theme="light"] input:focus {
    background-color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}

/* --- Buttons light tweaks --- */
[data-theme="light"] .btn-ghost {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

[data-theme="light"] .btn-ghost:hover {
    background: var(--primary-alpha);
    border-color: var(--primary-border);
    color: var(--primary-hover);
}

[data-theme="light"] .btn-cancel {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-weight: 600;
}

[data-theme="light"] .btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

/* --- Google OAuth Banner Card (Light & Dark Theme) --- */
.google-auth-card {
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.google-auth-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.google-auth-pill {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    padding: 1px 6px;
    border-radius: 4px;
}

[data-theme="dark"] .google-auth-title {
    color: #60a5fa;
}

[data-theme="dark"] .google-auth-pill {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}


/* --- Module chips + badges light --- */
[data-theme="light"] .module-chip {
    background: var(--primary-bg);
    color: var(--primary);
}

[data-theme="light"] .status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

[data-theme="light"] .status-badge.inactive {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* --- Dashboard hero banner light --- */
[data-theme="light"] .dashboard-hero {
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-alpha) 100%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* --- Select dropdown arrow (light) --- */
[data-theme="light"] .select-modern {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-size: 1.1rem !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .select-modern:hover {
    border-color: var(--primary-border) !important;
}

[data-theme="light"] .select-modern:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha) !important;
}

[data-theme="light"] .select-modern option {
    background: #ffffff;
    color: var(--text-main);
}

[data-theme="light"] .form-group select {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1rem !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .form-group select option {
    background: #ffffff;
    color: var(--text-main);
}

/* --- User pill light --- */
[data-theme="light"] .user-name { color: var(--text-main); }
[data-theme="light"] .user-role  { color: var(--text-muted); }

/* --- Toast / notifications light --- */
[data-theme="light"] #toast-container .toast {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    color: var(--text-main);
}

/* ==========================================================================
   SaaS Dynamic Accent Engine & Brand Customizer (Bespoke Luxury Palettes)
   ========================================================================== */

/* --- 1. Accent: Sky (Azul Ártico — Sapphire Deep Ocean) --- */
html[data-accent="sky"] {
    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --secondary: #0284c7;
}
html[data-accent="sky"][data-theme="dark"] {
    --primary-bg: rgba(56, 189, 248, 0.12);
    --primary-border: rgba(56, 189, 248, 0.28);
    --primary-alpha: rgba(56, 189, 248, 0.1);
    --primary-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --shadow-primary: 0 4px 18px rgba(14, 165, 233, 0.4);
    --surface-subtle: rgba(56, 189, 248, 0.06);
    --bg-base: #03101a;
    --bg-surface: #071c2e;
    --bg-surface-light: #0d2e48;
    --border-color: rgba(56, 189, 248, 0.16);
}
html[data-accent="sky"][data-theme="light"] {
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --secondary: #38bdf8;
    --primary-bg: rgba(2, 132, 199, 0.08);
    --primary-border: rgba(2, 132, 199, 0.2);
    --primary-alpha: rgba(2, 132, 199, 0.06);
    --primary-gradient: linear-gradient(135deg, #0284c7, #38bdf8);
    --shadow-primary: 0 4px 14px rgba(2, 132, 199, 0.25);
    --surface-subtle: rgba(2, 132, 199, 0.05);
}

/* --- 2. Accent: Violet (Titanio Corporate — Nebula Amethyst) --- */
html[data-accent="violet"] {
    --primary: #a855f7;
    --primary-hover: #9333ea;
    --secondary: #c084fc;
}
html[data-accent="violet"][data-theme="dark"] {
    --primary-bg: rgba(168, 85, 247, 0.12);
    --primary-border: rgba(168, 85, 247, 0.28);
    --primary-alpha: rgba(168, 85, 247, 0.1);
    --primary-gradient: linear-gradient(135deg, #9333ea, #c084fc);
    --shadow-primary: 0 4px 18px rgba(168, 85, 247, 0.4);
    --surface-subtle: rgba(168, 85, 247, 0.06);
    --bg-base: #0d091b;
    --bg-surface: #18112e;
    --bg-surface-light: #271c48;
    --border-color: rgba(168, 85, 247, 0.18);
}
html[data-accent="violet"][data-theme="light"] {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --secondary: #a78bfa;
    --primary-bg: rgba(124, 58, 237, 0.08);
    --primary-border: rgba(124, 58, 237, 0.2);
    --primary-alpha: rgba(124, 58, 237, 0.06);
    --primary-gradient: linear-gradient(135deg, #7c3aed, #a78bfa);
    --shadow-primary: 0 4px 14px rgba(124, 58, 237, 0.25);
    --surface-subtle: rgba(124, 58, 237, 0.05);
}

/* --- 3. Accent: Rose / Tokio (Tokio Night — Midnight Lavender) --- */
html[data-accent="rose"] {
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --secondary: #a5b4fc;
}
html[data-accent="rose"][data-theme="dark"] {
    --primary-bg: rgba(129, 140, 248, 0.12);
    --primary-border: rgba(129, 140, 248, 0.28);
    --primary-alpha: rgba(129, 140, 248, 0.08);
    --primary-gradient: linear-gradient(135deg, #6366f1, #818cf8);
    --shadow-primary: 0 4px 18px rgba(99, 102, 241, 0.4);
    --surface-subtle: rgba(129, 140, 248, 0.06);
    --bg-base: #090d1a;
    --bg-surface: #10172c;
    --bg-surface-light: #1a233f;
    --border-color: rgba(129, 140, 248, 0.16);
}
html[data-accent="rose"][data-theme="light"] {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --secondary: #818cf8;
    --primary-bg: rgba(99, 102, 241, 0.08);
    --primary-border: rgba(99, 102, 241, 0.2);
    --primary-alpha: rgba(99, 102, 241, 0.06);
    --primary-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
    --shadow-primary: 0 4px 14px rgba(99, 102, 241, 0.25);
    --surface-subtle: rgba(99, 102, 241, 0.05);
}

/* --- 4. Accent: Emerald (Esmeralda Imperial — Cyber Jade) --- */
html[data-accent="emerald"] {
    --primary: #10b981;
    --primary-hover: #059669;
    --secondary: #34d399;
}
html[data-accent="emerald"][data-theme="dark"] {
    --primary-bg: rgba(16, 185, 129, 0.12);
    --primary-border: rgba(16, 185, 129, 0.28);
    --primary-alpha: rgba(16, 185, 129, 0.1);
    --primary-gradient: linear-gradient(135deg, #059669, #34d399);
    --shadow-primary: 0 4px 18px rgba(16, 185, 129, 0.4);
    --surface-subtle: rgba(16, 185, 129, 0.06);
    --bg-base: #04120e;
    --bg-surface: #092019;
    --bg-surface-light: #103328;
    --border-color: rgba(16, 185, 129, 0.18);
}
html[data-accent="emerald"][data-theme="light"] {
    --primary: #059669;
    --primary-hover: #047857;
    --secondary: #10b981;
    --primary-bg: rgba(16, 185, 129, 0.08);
    --primary-border: rgba(16, 185, 129, 0.2);
    --primary-alpha: rgba(16, 185, 129, 0.06);
    --primary-gradient: linear-gradient(135deg, #059669, #10b981);
    --shadow-primary: 0 4px 14px rgba(16, 185, 129, 0.25);
    --surface-subtle: rgba(16, 185, 129, 0.05);
}

/* --- 5. Accent: Amber / Aurora (Aurora Boreal — Polar Arctic Mint) --- */
html[data-accent="amber"] {
    --primary: #2dd4bf;
    --primary-hover: #14b8a6;
    --secondary: #5eead4;
}
html[data-accent="amber"][data-theme="dark"] {
    --primary-bg: rgba(45, 212, 191, 0.12);
    --primary-border: rgba(45, 212, 191, 0.28);
    --primary-alpha: rgba(45, 212, 191, 0.08);
    --primary-gradient: linear-gradient(135deg, #14b8a6, #2dd4bf);
    --shadow-primary: 0 4px 18px rgba(20, 184, 166, 0.4);
    --surface-subtle: rgba(45, 212, 191, 0.06);
    --bg-base: #031416;
    --bg-surface: #072124;
    --bg-surface-light: #0d3237;
    --border-color: rgba(45, 212, 191, 0.16);
}
html[data-accent="amber"][data-theme="light"] {
    --primary: #0d9488;
    --primary-hover: #0f766e;
    --secondary: #2dd4bf;
    --primary-bg: rgba(13, 148, 136, 0.08);
    --primary-border: rgba(13, 148, 136, 0.2);
    --primary-alpha: rgba(13, 148, 136, 0.06);
    --primary-gradient: linear-gradient(135deg, #0d9488, #2dd4bf);
    --shadow-primary: 0 4px 14px rgba(13, 148, 136, 0.25);
    --surface-subtle: rgba(13, 148, 136, 0.05);
}

/* --- 6. Accent: Cyan (Aqua Matrix — Deep Abyss Teal) --- */
html[data-accent="cyan"] {
    --primary: #06b6d4;
    --primary-hover: #0891b2;
    --secondary: #22d3ee;
}
html[data-accent="cyan"][data-theme="dark"] {
    --primary-bg: rgba(6, 182, 212, 0.12);
    --primary-border: rgba(6, 182, 212, 0.28);
    --primary-alpha: rgba(6, 182, 212, 0.1);
    --primary-gradient: linear-gradient(135deg, #0891b2, #22d3ee);
    --shadow-primary: 0 4px 18px rgba(6, 182, 212, 0.4);
    --surface-subtle: rgba(6, 182, 212, 0.06);
    --bg-base: #031317;
    --bg-surface: #062026;
    --bg-surface-light: #0c333c;
    --border-color: rgba(6, 182, 212, 0.18);
}
html[data-accent="cyan"][data-theme="light"] {
    --primary: #0891b2;
    --primary-hover: #0e7490;
    --secondary: #06b6d4;
    --primary-bg: rgba(8, 145, 178, 0.08);
    --primary-border: rgba(8, 145, 178, 0.2);
    --primary-alpha: rgba(8, 145, 178, 0.06);
    --primary-gradient: linear-gradient(135deg, #0891b2, #06b6d4);
    --shadow-primary: 0 4px 14px rgba(8, 145, 178, 0.25);
    --surface-subtle: rgba(8, 145, 178, 0.05);
}

/* --- 7. Accent: Indigo (Azul Ejecutivo — Ultramarine Space) --- */
html:not([data-accent]), html[data-accent="indigo"] {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --secondary: #818cf8;
}
html:not([data-accent])[data-theme="dark"], html[data-accent="indigo"][data-theme="dark"] {
    --primary-bg: rgba(99, 102, 241, 0.12);
    --primary-border: rgba(99, 102, 241, 0.28);
    --primary-alpha: rgba(99, 102, 241, 0.1);
    --primary-gradient: linear-gradient(135deg, #4f46e5, #818cf8);
    --shadow-primary: 0 4px 18px rgba(99, 102, 241, 0.4);
    --surface-subtle: rgba(99, 102, 241, 0.06);
    --bg-base: #070a16;
    --bg-surface: #0e1428;
    --bg-surface-light: #17203e;
    --border-color: rgba(99, 102, 241, 0.18);
}
html:not([data-accent])[data-theme="light"], html[data-accent="indigo"][data-theme="light"] {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --secondary: #6366f1;
    --primary-bg: rgba(79, 70, 229, 0.08);
    --primary-border: rgba(79, 70, 229, 0.2);
    --primary-alpha: rgba(79, 70, 229, 0.06);
    --primary-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
    --shadow-primary: 0 4px 14px rgba(79, 70, 229, 0.25);
    --surface-subtle: rgba(79, 70, 229, 0.05);
}

/* --- 8. Accent: Slate (Titanio Obsidian — Stealth Matte OLED) --- */
html[data-accent="slate"] {
    --primary: #94a3b8;
    --primary-hover: #64748b;
    --secondary: #cbd5e1;
}
html[data-accent="slate"][data-theme="dark"] {
    --primary-bg: rgba(148, 163, 184, 0.12);
    --primary-border: rgba(148, 163, 184, 0.28);
    --primary-alpha: rgba(148, 163, 184, 0.1);
    --primary-gradient: linear-gradient(135deg, #64748b, #cbd5e1);
    --shadow-primary: 0 4px 18px rgba(148, 163, 184, 0.4);
    --surface-subtle: rgba(148, 163, 184, 0.06);
    --bg-base: #090a0d;
    --bg-surface: #12141a;
    --bg-surface-light: #1c2028;
    --border-color: rgba(148, 163, 184, 0.18);
}
html[data-accent="slate"][data-theme="light"] {
    --primary: #475569;
    --primary-hover: #334155;
    --secondary: #64748b;
    --primary-bg: rgba(71, 85, 105, 0.08);
    --primary-border: rgba(71, 85, 105, 0.2);
    --primary-alpha: rgba(71, 85, 105, 0.06);
    --primary-gradient: linear-gradient(135deg, #475569, #64748b);
    --shadow-primary: 0 4px 14px rgba(71, 85, 105, 0.25);
    --surface-subtle: rgba(71, 85, 105, 0.05);
}

/* ==========================================================================
   Premium Glassmorphism & Visual Upgrades
   ========================================================================== */

.glass-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
}

/* View Transitions API circular theme toggle */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none !important;
    mix-blend-mode: normal !important;
}
::view-transition-old(root) {
    z-index: 1;
}
::view-transition-new(root) {
    z-index: 99999;
}
[data-theme="dark"]::view-transition-old(root) {
    z-index: 99999;
}
[data-theme="dark"]::view-transition-new(root) {
    z-index: 1;
}

/* Premium Shimmer skeleton loaders card structures */
.shimmer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 220px;
}
.shimmer-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
[data-theme="light"] .shimmer-card::after {
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.04), transparent);
}
.shimmer-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-surface-light);
}
.shimmer-bar {
    height: 14px;
    border-radius: 4px;
    background: var(--bg-surface-light);
}
.shimmer-bar.short { width: 40%; }
.shimmer-bar.medium { width: 70%; }
.shimmer-bar.long { width: 100%; }
.shimmer-button {
    height: 38px;
    border-radius: 8px;
    background: var(--bg-surface-light);
    margin-top: auto;
}

/* Theme accent settings */
.accent-menu {
    position: relative;
    margin-right: 0.5rem;
}
.accent-trigger, .theme-toggle {
    background: var(--bg-surface-light);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.accent-trigger:hover, .theme-toggle:hover {
    color: var(--primary) !important;
    border-color: var(--primary-border) !important;
    background: var(--primary-alpha) !important;
    transform: scale(1.05);
}
.accent-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.75rem;
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.accent-dropdown.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.accent-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    width: 100%;
}
.accent-option:hover {
    background: var(--bg-surface-light);
    color: var(--primary);
    padding-left: 1rem;
}
.accent-option.active {
    background: var(--primary-alpha);
    color: var(--primary);
}
.accent-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: none !important;
}
.dot-sky     { background: #38bdf8; }
.dot-violet  { background: #a855f7; }
.dot-rose    { background: #818cf8; }
.dot-emerald { background: #10b981; }
.dot-amber   { background: #2dd4bf; }
.dot-cyan    { background: #06b6d4; }
.dot-indigo  { background: #6366f1; }
.dot-slate   { background: #94a3b8; }

/* Micro-animations and skeletons */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-loader {
    background: linear-gradient(90deg, var(--bg-surface-light) 25%, var(--border-color) 50%, var(--bg-surface-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    height: 20px;
    width: 100%;
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 0 0 var(--primary-alpha); }
    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.premium-glow-btn {
    animation: none !important;
}

.kpi-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}
.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border) !important;
}
.kpi-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle, var(--primary-alpha) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}
.kpi-card:hover::after {
    opacity: 1;
}

/* Simulator aesthetics */
.simulator-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.simulator-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100% !important;
    height: 6px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    margin: 0.5rem 0 !important;
    transition: background 0.3s;
}
[data-theme="light"] .simulator-slider {
    background: #cbd5e1 !important;
}
.simulator-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 10px var(--primary);
    border: none !important;
    transition: transform 0.1s;
}
.simulator-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 10px var(--primary);
    border: none !important;
    transition: transform 0.1s;
}
.simulator-slider::-webkit-slider-thumb:hover,
.simulator-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Console layout for server health */
.console-panel {
    background: #090d16;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 1rem;
    color: #38bdf8;
    font-family: monospace;
    font-size: 0.85rem;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}
.console-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.15);
}
.console-row:last-child {
    border-bottom: none;
}
.console-green { color: #4ade80; }
.console-yellow { color: #facc15; }

/* Light Theme Console Panel */
[data-theme="light"] .console-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0369a1;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .console-row {
    color: #334155;
    border-bottom: 1px dashed #cbd5e1;
}
[data-theme="light"] .console-green {
    color: #16a34a;
    font-weight: 700;
}
[data-theme="light"] .console-yellow {
    color: #d97706;
    font-weight: 700;
}
[data-theme="light"] #server-api-latency {
    color: #0284c7 !important;
    font-weight: 700;
}

/* Filter pills audit */
.audit-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.audit-pill {
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.audit-pill:hover {
    border-color: var(--primary-border);
    color: var(--primary);
}
.audit-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ==========================================================================
   SWEETALERT2 MODERN & PREMIUM FORM CONTROLS (PROMOTIONS MODULE & MORE)
   ========================================================================== */

.swal-modern-container {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
    font-family: var(--font-family) !important;
}

.swal-modern-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.swal-modern-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 4px;
    display: block;
}



.swal-modern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 480px) {
    .swal-modern-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   RESPONSIVE MÓVIL COMPLETO — index.html · client-dashboard.html · super-admin.html
   ========================================================================== */

/* ---- TABLET (≤ 1024px): colapsar sidebar en pantallas medianas ---- */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
    .modules-grid,
    .modules-quick-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

/* ---- MÓVIL (≤ 768px): layout de una columna completo ---- */
@media (max-width: 768px) {

    /* =================== LOGIN PAGE (index.html) =================== */
    #login-view {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }
    .login-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        max-width: 100%;
    }
    .login-title {
        font-size: 1.4rem !important;
    }
    .login-subtitle {
        font-size: 0.875rem;
    }
    .login-logo {
        margin-bottom: 1.5rem;
    }

    /* =================== TOPBAR AJUSTES COMUNES =================== */
    .topbar {
        height: calc(64px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
    }
    .topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .topbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }
    .topbar-breadcrumb .breadcrumb-root,
    .topbar-breadcrumb i:first-of-type {
        display: none !important;
    }
    .topbar-breadcrumb #topbar-page-name {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }

    /* Perfil del Cliente en móvil como botón circular compacto estilo app nativa */
    #profile-dropdown-btn {
        padding: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-surface-light) !important;
        transition: all 0.2s !important;
    }
    #profile-dropdown-btn:hover {
        background: var(--primary-alpha) !important;
        border-color: var(--primary-border) !important;
    }
    #profile-dropdown-btn #client-avatar-display {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
    }
    #profile-dropdown-btn #client-name-display,
    #profile-dropdown-btn i[data-lucide="chevron-down"],
    #profile-dropdown-btn svg {
        display: none !important;
    }

    /* =================== PAGE HEADER =================== */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .page-header > div:last-child,
    .page-header > button,
    .page-header > a {
        width: 100% !important;
    }
    .page-header button,
    .page-header a.btn-primary {
        justify-content: center !important;
        width: 100% !important;
    }
    .page-title {
        font-size: 1.5rem !important;
    }

    /* =================== TAB CONTENT =================== */
    .tab-content {
        padding: 1rem !important;
        overflow-y: visible !important;
        height: auto !important;
        overscroll-behavior-y: auto !important;
    }

    /* =================== CLIENT DASHBOARD HERO =================== */
    .dashboard-hero {
        flex-direction: column !important;
        padding: 1.5rem !important;
        gap: 1rem !important;
        border-radius: 16px !important;
        margin-bottom: 1.25rem !important;
    }
    .hero-content h1 {
        font-size: 1.4rem !important;
    }
    .hero-content p {
        font-size: 0.9rem !important;
    }
    .hero-illustration {
        display: none !important;
    }

    /* =================== KPI GRID =================== */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }
    .kpi-card {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    .kpi-icon {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0;
    }
    .kpi-icon i { width: 20px !important; height: 20px !important; }
    .kpi-value {
        font-size: 1.35rem !important;
    }
    .kpi-label {
        font-size: 0.78rem !important;
    }
    .kpi-trend {
        display: none !important;
    }

    /* =================== CHARTS =================== */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* =================== MÓDULOS / MARKETPLACE GRID =================== */
    .client-grid,
    .modules-grid,
    .modules-quick-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* =================== BUSCADOR Y FILTROS =================== */
    .search-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .search-wrap {
        max-width: 100% !important;
        width: 100% !important;
    }
    .filter-pills {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        white-space: normal !important;
    }

    /* =================== TABLAS =================== */
    .table-responsive,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .data-table,
    table.data-table {
        min-width: 580px !important;
    }

    /* =================== SUPER ADMIN NEGOCIOS — BARRA CABECERA =================== */
    /* La fila de cabecera de la lista de negocios se oculta en móvil */
    #tab-businesses > div[style*="display:flex"][style*="border-bottom"] {
        display: none !important;
    }

    /* =================== BIZ LIST ITEM (MÓVIL PREMIUM) =================== */
    .biz-list-item {
        position: relative !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.6rem !important;
        padding: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .biz-info-main {
        width: calc(100% - 3rem) !important;
        min-width: 0 !important;
        flex: none !important;
        margin-bottom: 0.25rem !important;
    }
    .biz-info-main .biz-name {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }
    .biz-info-city {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin-bottom: 0.4rem !important;
        font-size: 0.85rem !important;
    }
    .biz-info-modules {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin-bottom: 0.4rem !important;
        gap: 0.4rem !important;
    }
    .biz-info-status {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
        justify-content: flex-start !important;
        margin-top: 0.2rem !important;
    }
    .biz-actions {
        position: absolute !important;
        top: 1.25rem !important;
        right: 1.25rem !important;
        width: auto !important;
        min-width: unset !important;
        flex: none !important;
        margin: 0 !important;
    }
    .biz-actions button.dropdown-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: unset !important;
        border-radius: 50% !important;
        background: var(--bg-surface-light) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-muted) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    .biz-actions button.dropdown-toggle:hover {
        background: var(--primary-alpha) !important;
        color: var(--primary) !important;
        border-color: var(--primary-border) !important;
    }

    /* =================== MODALES =================== */
    .modal-overlay {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }
    .modal-box {
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        max-width: 100% !important;
    }
    .modal-header {
        padding: 1rem 1rem 0.75rem !important;
    }
    .modal-header h3 {
        font-size: 1rem !important;
    }
    .modal-actions {
        padding: 1rem !important;
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
    }
    .modal-actions button {
        width: 100% !important;
        justify-content: center !important;
    }
    .form-content-scroll {
        padding: 1rem !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* =================== MODALES MODERNOS (modern-header / modal-actions-modern) =================== */
    .modal-header-modern {
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .modal-actions-modern {
        padding: 1rem !important;
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
    }
    .modal-actions-modern button,
    .btn-save-modern {
        width: 100% !important;
        justify-content: center !important;
    }

    /* =================== BILLING / SUSCRIPCIÓN =================== */
    /* Plan Info Row (cliente) */
    #card-wallet {
        flex-direction: column !important;
    }
    .billing-card-premium {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    /* =================== DASHBOARD HERO DE SOPORTE =================== */
    #tab-support .dashboard-hero {
        padding: 1.25rem !important;
    }
    #tab-support .client-grid {
        grid-template-columns: 1fr !important;
    }

    /* =================== ACCOUNT TAB (Mi Cuenta) =================== */
    #tab-account .biz-card {
        padding: 1.5rem !important;
        margin-top: 1rem !important;
    }

    /* =================== CONFIGURACIÓN (super-admin) =================== */
    #tab-settings > div[style*="max-width: 500px"],
    #tab-settings > div[style*="max-width:500px"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .config-nav-btn {
        padding: 0.7rem !important;
        font-size: 0.875rem !important;
    }

    /* =================== HISTORIAL DE PAGOS — botón PDF =================== */
    #tab-client-payment-history .page-header > div:last-child button,
    #tab-payment-history .page-header > div:last-child button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* =================== PROMOCIONES — KPI GRID =================== */
    #tab-promotions .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* =================== SIMULATOR CARDS =================== */
    .simulator-slider-wrap {
        padding: 0 !important;
    }

    /* =================== SECTION CARD HEADER en móvil =================== */
    .section-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .section-card-header button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* =================== TOAST EN MÓVIL =================== */
    #toast-container {
        bottom: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
    }
    .toast {
        width: 100% !important;
        font-size: 0.875rem !important;
    }

    /* =================== NOTIFICATIONS DROPDOWN =================== */
    .notifications-dropdown {
        width: calc(100vw - 2rem) !important;
        right: -0.5rem !important;
        left: auto !important;
    }

    /* =================== ACCENT / THEME BUTTONS (topbar) =================== */
    .accent-dropdown {
        right: -0.5rem !important;
    }
}

/* ---- MÓVIL PEQUEÑO (≤ 480px): ajustes extra ---- */
@media (max-width: 480px) {

    /* Login card a pantalla completa */
    .login-card {
        padding: 1.75rem 1.25rem !important;
        border-radius: 16px !important;
    }
    .login-title {
        font-size: 1.25rem !important;
    }

    /* KPI en 2 columnas también en pantallas pequeñas */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Hero h1 más pequeño */
    .hero-content h1 {
        font-size: 1.2rem !important;
    }

    /* Tabs de módulos en módulo activo / suspendido */
    #module-tabs-container {
        width: auto !important;
        flex: 1 !important;
    }
    #module-tabs-container button {
        flex: 1 !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    /* Profile dropdown — ancho flotante premium que no obstruye la pantalla */
    #profile-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        width: 220px !important;
        min-width: unset !important;
    }

    /* Breadcrumb — ocultar en pantallas muy pequeñas */
    .breadcrumbs span:first-child,
    .breadcrumbs i:first-of-type {
        display: none !important;
    }

    /* Botones de facturación más compactos */
    #tab-billing .biz-card[style*="flex:1"] {
        min-width: 100% !important;
    }

    /* Page title más compacto */
    .page-title {
        font-size: 1.25rem !important;
    }
    .content-title {
        font-size: 1.75rem !important;
    }

    /* Chips de módulos apilados */
    .biz-modules {
        flex-wrap: wrap !important;
    }

    /* Eliminado el estiramiento completo para favorecer el diseño flotante compacto */
}

/* ==========================================
   CAROUSEL/SLIDER PREMIUM FOR MODULES
   ========================================== */
.carousel-container-premium {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 0.5rem 0.25rem 1.5rem 0.25rem;
    scrollbar-width: none; /* Firefox */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.carousel-track .biz-card {
    flex: 0 0 320px !important;
    scroll-snap-align: start;
    box-sizing: border-box;
}

.carousel-arrow {
    position: absolute;
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    display: none; /* Ocultar por defecto en modo PC */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.carousel-arrow:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--primary-alpha);
}

.carousel-arrow.prev {
    left: -22px;
}

.carousel-arrow.next {
    right: -22px;
}

@media (max-width: 768px) {
    .carousel-arrow {
        display: flex !important;
        width: 38px !important;
        height: 38px !important;
        top: calc(50% - 19px) !important;
        z-index: 100 !important;
        background: var(--bg-surface-light) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
        border-color: var(--primary-border) !important;
    }
    .carousel-arrow.prev {
        left: 8px !important;
    }
    .carousel-arrow.next {
        right: 8px !important;
    }
    .carousel-track {
        gap: 1rem;
        padding-bottom: 1rem;
    }
    .carousel-track .biz-card {
        flex: 0 0 280px !important;
    }
}

/* Custom premium styling for side-by-side modules carousel */
.carousel-container-outer {
    position: relative;
    width: 100%;
}
.carousel-scroll-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 0.5rem 4px 1.5rem 4px;
    scrollbar-width: none; /* Firefox */
}
.carousel-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.carousel-scroll-container > * {
    flex: 0 0 320px !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .carousel-scroll-container > * {
        flex: 0 0 280px !important;
        max-width: 280px !important;
    }
}
.carousel-nav-btn {
    position: absolute;
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    display: none; /* Ocultar por defecto en modo PC */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-md);
}
.carousel-nav-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--primary-alpha);
}
.carousel-nav-btn.prev-btn {
    left: -22px;
}
.carousel-nav-btn.next-btn {
    right: -22px;
}
.carousel-nav-btn.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
@media (max-width: 768px) {
    .carousel-nav-btn {
        display: flex;
        width: 38px !important;
        height: 38px !important;
        top: calc(50% - 19px) !important;
        z-index: 100 !important;
        background: var(--bg-surface-light) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
        border-color: var(--primary-border) !important;
    }
    .carousel-nav-btn.hidden {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    .carousel-nav-btn.prev-btn {
        left: 8px !important;
    }
    .carousel-nav-btn.next-btn {
        right: 8px !important;
    }
}

/* ==========================================================================
   CUSTOM PREMIUM SCROLLBARS
   ========================================================================== */

/* Global premium scrollbar style */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3); /* Cool dark transparent track */
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Specific inner panels .custom-scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.28); /* Indicated brand color */
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background 0.25s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.55);
    border: 1px solid transparent;
    background-clip: padding-box;
}

/* Firefox compatibility */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.28) rgba(255, 255, 255, 0.01);
}

/* ==========================================================================
   DAY MODE (LIGHT MODE) MODAL AND INPUT FIXES
   ========================================================================== */
/* ==========================================================================
   DAY MODE (LIGHT MODE) MODAL AND INPUT FIXES
   ========================================================================== */
[data-theme="light"] .modern-modal,
[data-theme="light"] .modal-box {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 30px 60px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .modal-header,
[data-theme="light"] .modal-header-modern {
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.03), transparent) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.08) !important;
}

[data-theme="light"] .modal-header h3,
[data-theme="light"] .modal-header-modern h3,
[data-theme="light"] .modern-modal h3,
[data-theme="light"] .modal-box h3 {
    color: #0f172a !important;
}

[data-theme="light"] .modal-actions,
[data-theme="light"] .modal-actions-modern {
    border-top: 1px solid rgba(99, 102, 241, 0.08) !important;
    background: rgba(99, 102, 241, 0.02) !important;
}

[data-theme="light"] .modern-modal label,
[data-theme="light"] .modal-box label {
    color: #475569 !important;
}

[data-theme="light"] .modern-modal .field-hint-modern,
[data-theme="light"] .modal-box .field-hint-modern,
[data-theme="light"] .modal-box .field-hint {
    color: #64748b !important;
}

[data-theme="light"] .input-modern-wrap input,
[data-theme="light"] .input-modern-wrap textarea,
[data-theme="light"] .select-modern,
[data-theme="light"] .modal-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-theme="light"] .modal-form select,
[data-theme="light"] .modal-form textarea {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="light"] .input-modern-wrap input:focus,
[data-theme="light"] .input-modern-wrap textarea:focus,
[data-theme="light"] .select-modern:focus,
[data-theme="light"] .modal-form input:focus,
[data-theme="light"] .modal-form select:focus,
[data-theme="light"] .modal-form textarea:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .select-modern {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.2rem !important;
    color: #0f172a !important;
}

[data-theme="light"] .select-modern option,
[data-theme="light"] select.select-modern option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

[data-theme="light"] #dashboard-view .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .biz-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] #dashboard-view .form-group .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .settings-section .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .form-group-modern .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .modal-form .input-modern-wrap input:not([type="checkbox"]):not([type="radio"]) {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: #0f172a !important;
    padding-left: 2.85rem !important;
}

[data-theme="light"] #dashboard-view .input-icon-wrap input:focus,
[data-theme="light"] .biz-card .input-icon-wrap input:focus,
[data-theme="light"] #dashboard-view .form-group .input-icon-wrap input:focus,
[data-theme="light"] .settings-section .input-icon-wrap input:focus,
[data-theme="light"] .input-modern-wrap input:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Light theme: plain inputs inside form-group (modals, settings) */
[data-theme="light"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]),
[data-theme="light"] .biz-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]):not([type="range"]) {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="light"] .form-group input:not([type="range"]):focus,
[data-theme="light"] .biz-card input:not([type="range"]):focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* *** LOGIN CARD: Siempre oscuro, sin importar el tema del OS/navegador *** */
[data-theme] .login-card .input-icon-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
[data-theme="light"] .login-card .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
html .login-card .input-icon-wrap input,
.login-card .form-group input {
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-theme] .login-card .input-icon-wrap input:focus,
[data-theme="light"] .login-card .form-group input:focus,
html .login-card .input-icon-wrap input:focus,
.login-card .form-group input:focus {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--primary, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .biz-card input::placeholder,
[data-theme="light"] .input-icon-wrap input::placeholder {
    color: rgba(15, 23, 42, 0.4) !important;
}
/* Login card placeholder: siempre blanco */
[data-theme] .login-card input::placeholder,
[data-theme="light"] .login-card input::placeholder,
html .login-card input::placeholder,
.login-card input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
/* Login card icon: siempre blanco */
[data-theme] .login-card .input-icon-wrap > i,
[data-theme] .login-card .input-icon-wrap > svg,
[data-theme="light"] .login-card .input-icon-wrap > i,
[data-theme="light"] .login-card .input-icon-wrap > svg {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Light theme: icon color in input-icon-wrap */
[data-theme="light"] .input-icon-wrap > i,
[data-theme="light"] .input-icon-wrap > svg {
    color: rgba(15, 23, 42, 0.45) !important;
}

[data-theme="light"] .input-icon-wrap:focus-within > i,
[data-theme="light"] .input-icon-wrap:focus-within > svg {
    color: var(--primary) !important;
}

/* Light Theme Scrollbars */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.03) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.25) !important;
}

[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(99, 102, 241, 0.02) !important;
}

[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="light"] .custom-scrollbar {
    scrollbar-color: rgba(99, 102, 241, 0.2) rgba(99, 102, 241, 0.02);
}

/* ==========================================================================
   SUPER ADMIN SHINY STYLES (PREMIUM GOLD/PURPLE THEME)
   ========================================================================== */

/* ── Keyframes ── */
@keyframes sa-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes sa-sweep {
    0%   { left: -80%; }
    100% { left: 130%; }
}
@keyframes sa-crown-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-2px) scale(1.08); }
}
@keyframes sa-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%       { transform: scale(1.35); opacity: 1; }
}
@keyframes sa-spark-float {
    0%   { transform: translateY(0px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-14px) rotate(180deg); opacity: 0; }
}
@keyframes sa-badge-glow {
    0%, 100% { box-shadow: 0 0 8px 1px var(--primary-border), 0 0 20px 2px rgba(251,191,36,0.10), inset 0 1px 0 rgba(255,255,255,0.25); }
    50%       { box-shadow: 0 0 16px 4px var(--primary), 0 0 35px 6px rgba(251,191,36,0.25), inset 0 1px 0 rgba(255,255,255,0.35); }
}

/* ══════════════════════════════════════════
   SUPER ADMIN — UNIFIED PILL
   (avatar + badge + logout in one capsule)
   ══════════════════════════════════════════ */

/* Wrapper that replaces the old user-pill + separate logout */
.sa-unified {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-radius: 999px;
    background: var(--primary-gradient);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    position: relative;
    animation: none !important;
    white-space: nowrap;
    max-width: 100%;
}
[data-theme="light"] .sa-unified {
    background: var(--primary-gradient);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}
/* Aurora sweep on unified pill */
.sa-unified::before {
    content: '';
    position: absolute;
    top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.22),
        rgba(251,191,36,0.14),
        rgba(255,255,255,0.22),
        transparent);
    transform: skewX(-15deg);
    animation: none !important;
    pointer-events: none;
    z-index: 1;
}

/* Left section: diamond avatar */
.sa-unified-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-left: 3px;
    z-index: 2;
    position: relative;
}

/* Center section: crown + label + orbs */
.sa-unified-center {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    padding: 0 8px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* Right section: logout button */
.sa-unified .sa-unified-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fill the full height of the pill — no more tiny corner target */
    align-self: stretch;
    width: 42px;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fbbf24 !important; /* Gold color matching the letters */
    cursor: pointer;
    border-radius: 0 999px 999px 0 !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    margin-right: 0;
    padding: 0 10px !important;
    z-index: 2;
    position: relative;
    box-shadow: none !important;
    animation: none !important;
}
.sa-unified .sa-unified-logout:hover {
    background: rgba(239, 68, 68, 0.75) !important;
    color: #ffffff !important;
    border-left-color: rgba(239,68,68,0.5) !important;
    /* Premium glow shadow on hover — no color change on the pill itself */
    box-shadow:
        inset -6px 0 18px rgba(239, 68, 68, 0.25),
        4px 0 16px rgba(239, 68, 68, 0.18) !important;
}
.sa-unified .sa-unified-logout svg,
.sa-unified .sa-unified-logout i {
    transition: transform 0.3s ease, filter 0.3s ease;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.sa-unified .sa-unified-logout:hover svg,
.sa-unified .sa-unified-logout:hover i {
    transform: translateX(2px);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
}

/* Collapsed sidebar: hide the unified pill, show logout standalone */
.sidebar.collapsed .sa-unified {
    background: transparent;
    border: none;
    animation: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}
.sidebar.collapsed .sa-unified::before {
    display: none;
}
.sidebar.collapsed .sa-unified-avatar,
.sidebar.collapsed .sa-unified-center {
    display: none;
}
.sidebar.collapsed .sa-unified .sa-unified-logout {
    border-left: none !important;
    border-radius: 10px !important;
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    animation: none !important;
}
.sidebar.collapsed .sa-unified .sa-unified-logout:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.85) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 18px 4px rgba(239, 68, 68, 0.6), 0 0 30px 10px rgba(239, 68, 68, 0.2) !important;
    transform: scale(1.1) translateY(-1px);
}

/* ── Badge container (legacy, kept for compatibility) ── */
.sa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        rgba(2,132,199,0.95) 0%,
        rgba(3,105,161,0.92) 30%,
        rgba(37,99,235,0.90) 60%,
        rgba(2,132,199,0.92) 100%);
    border: 1.5px solid rgba(56,189,248,0.45);
    position: relative;
    overflow: hidden;
    animation: none !important;
    cursor: default;
    user-select: none;
}
/* Light mode: darker, richly visible */
[data-theme="light"] .sa-badge {
    background: linear-gradient(135deg,
        rgba(2,132,199,0.95) 0%,
        rgba(3,105,161,0.92) 35%,
        rgba(37,99,235,0.93) 65%,
        rgba(2,132,199,0.95) 100%);
    border: 1.5px solid rgba(56,189,248,0.6);
}

/* Aurora sweep */
.sa-badge::before {
    content: '';
    position: absolute;
    top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.22),
        rgba(251,191,36,0.14),
        rgba(255,255,255,0.22),
        transparent);
    transform: skewX(-15deg);
    animation: none !important;
}

/* ── Crown icon ── */
.sa-crown {
    animation: sa-crown-float 2.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Text ── */
.sa-label {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #fde68a, #fbbf24, #f59e0b, #fde68a);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sa-shimmer 2.8s linear infinite;
    display: inline-block;
}

/* ── Orbs / dots ── */
.sa-orb {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fde68a, #f59e0b);
    flex-shrink: 0;
    animation: sa-orb-pulse 1.8s ease-in-out infinite;
}
.sa-orb:nth-child(2) { animation-delay: 0.9s; }

/* ── Sparkle particles ── */
.sa-sparks {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.sa-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #fde68a;
    animation: sa-spark-float 2s ease-out infinite;
}
.sa-spark:nth-child(1) { left: 15%; bottom: 20%; animation-delay: 0s; }
.sa-spark:nth-child(2) { left: 45%; bottom: 10%; animation-delay: 0.7s; background: #c4b5fd; }
.sa-spark:nth-child(3) { left: 75%; bottom: 20%; animation-delay: 1.4s; background: #a5f3fc; }

/* ── Avatar ring for Super Admin ── */
.sa-avatar-ring {
    position: relative;
}
.sa-avatar-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #0284c7, #10b981, #f59e0b, #0284c7
    );
    z-index: -1;
    animation: sa-shimmer 2s linear infinite;
    background-size: 200%;
}

/* ── Premium Avatar ── */
.sa-avatar-premium {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #2563eb 100%) !important;
    border: 1.5px solid rgba(251,191,36,0.65) !important;
    box-shadow: 0 0 12px 2px rgba(2,132,199,0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: sa-avatar-pulse 3s infinite ease-in-out;
}
.sa-avatar-premium::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: sa-avatar-sweep 3s infinite ease-in-out;
}
.sa-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
@keyframes sa-avatar-pulse {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(168,85,247,0.4), 0 0 0 0px rgba(251,191,36,0.2); }
    50% { box-shadow: 0 0 20px 5px rgba(168,85,247,0.6), 0 0 0 4px rgba(251,191,36,0.4); }
}
@keyframes sa-avatar-sweep {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

/* ── Premium Logout Button (Shining/Glow) ── */
/* Default: Clean and borderless when sidebar is expanded */
.logout-btn {
    position: relative;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    animation: none !important;
}
.logout-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.logout-btn:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.85) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px 3px rgba(239, 68, 68, 0.5) !important;
    transform: scale(1.08) translateY(-1px);
}
.logout-btn:hover::before {
    opacity: 1;
}
.logout-btn i, .logout-btn svg {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}
.logout-btn:hover i, .logout-btn:hover svg {
    transform: translateX(2px) scale(1.15);
    filter: drop-shadow(0 0 3px #fff);
}

/* Collapsed: Show as a subtle icon-only button, red glow only on hover */
.sidebar.collapsed .logout-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    animation: none !important;
}
.sidebar.collapsed .logout-btn:hover {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.85) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 18px 4px rgba(239, 68, 68, 0.6), 0 0 30px 10px rgba(239, 68, 68, 0.2) !important;
    transform: scale(1.1) translateY(-1px);
}
@keyframes sa-logout-glow {
    0%, 100% { box-shadow: 0 0 6px 0px rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.45); }
}

/* ==========================================================================
   Premium Interface Polish, Animations and Upgrades
   ========================================================================== */

/* ── SweetAlert2 Glassmorphism ── */
.swal2-popup {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-lg), 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px var(--primary-alpha) !important;
    border-radius: 24px !important;
}

/* ── Entrance FadeInUp Animation ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card, .biz-card, .section-card, .glass-card {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kpi-card:nth-child(1) { animation-delay: 0.04s; }
.kpi-card:nth-child(2) { animation-delay: 0.08s; }
.kpi-card:nth-child(3) { animation-delay: 0.12s; }
.kpi-card:nth-child(4) { animation-delay: 0.16s; }

/* ── Table Rows Hover Micro-Animations (Optimized for 60/120fps scrolling) ── */
.data-table tbody tr {
    transition: background 0.12s ease;
}
.data-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

/* ── Hardware Acceleration & Scrolling Isolation for Charts & Tables ── */
.charts-grid .biz-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    contain: layout style paint;
}
.charts-grid .biz-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-color) !important;
}
.charts-grid canvas {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── Urgent Ticket Pulse & Glow Animations ── */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

.pulse-border {
    position: relative;
}
.pulse-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid #ef4444;
    animation: badgePulse 2s infinite;
    pointer-events: none;
    opacity: 0.35;
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: badgePulse 1.6s infinite;
}

.nav-badge-urgent {
    background: linear-gradient(135deg, #f87171, #ef4444);
    color: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    animation: badgePulse 1.8s infinite;
}

.nav-btn:hover .nav-badge.nav-badge-urgent {
    background: linear-gradient(135deg, #fca5a5, #f87171);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
    transform: scale(1.1);
}

/* ── Closed Chat Banner Styling ── */
.chat-closed-banner {
    padding: 12px 18px;
    background: rgba(239, 68, 68, 0.06) !important;
    border-top: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.02em;
    animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Hover Scale Utility ── */
.hover-scale {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
.hover-scale:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   CUSTOM SINGLE-SELECT DROPDOWNS
   ========================================================================== */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 1.25rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.custom-select-trigger:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.015);
}

.custom-select-trigger.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
    background: var(--input-bg);
}

.custom-select-trigger .chevron-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-trigger.active .chevron-icon {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    z-index: 1010;
    display: none;
    padding: 0.45rem;
    animation: slideDownSelect 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-dropdown.active {
    display: block;
}

.custom-select-option {
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-select-option:hover {
    background: var(--primary-alpha);
    color: var(--primary);
    padding-left: 1.25rem;
}

.custom-select-option.selected {
    background: var(--primary) !important;
    color: white !important;
}

@keyframes slideDownSelect {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==========================================================================
   SWAL PREMIUM SELECT — Custom Premium Dropdown for SweetAlert2 and Modals
   ========================================================================== */

/* Hide the native <select> completely and prevent double arrow display */
.swal-select-wrap {
    position: relative;
    width: 100%;
}

.swal-select-wrap select {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* ── Trigger button ── */
.swal-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    min-height: 36px;
    padding: 0 0.85rem;
    background: var(--bg-surface-light) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 12px;
    color: var(--text-main) !important;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    text-align: left;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
}

/* Ensure no pseudo-element arrow is added */
.swal-select-btn::after {
    display: none !important;
    content: none !important;
}

.swal-select-btn:hover {
    border-color: var(--primary-border) !important;
    background: var(--primary-alpha) !important;
    box-shadow: 0 4px 12px var(--primary-alpha) !important;
}

.swal-select-btn.open {
    border-color: var(--primary) !important;
    background: var(--primary-alpha) !important;
    box-shadow: 0 0 0 3px var(--primary-alpha) !important;
}

/* Chevron icon inside the button */
.swal-select-btn .swal-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
    margin-left: 0.5rem;
}

.swal-select-btn.open .swal-chevron {
    transform: rotate(180deg);
    color: var(--primary) !important;
}

/* Label element wrapper */
.swal-select-label {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

/* ── Dropdown panel ── */
.swal-select-panel {
    position: fixed;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    padding: 0.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-alpha) !important;
    z-index: 99999;
    max-height: 260px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-border) transparent;
}

/* Custom Scrollbar for Panel */
.swal-select-panel::-webkit-scrollbar {
    width: 6px;
}
.swal-select-panel::-webkit-scrollbar-track {
    background: transparent;
}
.swal-select-panel::-webkit-scrollbar-thumb {
    background: var(--primary-border, rgba(99, 102, 241, 0.25));
    border-radius: 10px;
}
.swal-select-panel::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #6366f1);
}

.swal-select-panel.hidden {
    display: none;
}

/* ── Items ── */
.swal-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.95rem;
    margin: 2px 0;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap !important;
}

.swal-select-item:hover {
    background: var(--primary-alpha, rgba(99, 102, 241, 0.12));
    color: var(--primary-light, #818cf8);
    padding-left: 1.15rem;
}

.swal-select-item.selected {
    background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--secondary))) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px var(--primary-alpha, rgba(99, 102, 241, 0.25));
}

/* ── Light Mode Overrides ── */
[data-theme="light"] .swal-select-btn {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .swal-select-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .swal-select-btn.open {
    border-color: var(--primary, #4f46e5);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(79, 70, 229, 0.15)), 0 4px 12px var(--primary-alpha, rgba(79, 70, 229, 0.08));
}

[data-theme="light"] .swal-select-panel {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    scrollbar-color: var(--primary-border, rgba(79, 70, 229, 0.2)) transparent;
}

[data-theme="light"] .swal-select-panel::-webkit-scrollbar-thumb {
    background: var(--primary-border, rgba(79, 70, 229, 0.2));
}
[data-theme="light"] .swal-select-panel::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #4f46e5);
}

[data-theme="light"] .swal-select-item {
    color: #334155;
}

[data-theme="light"] .swal-select-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="light"] .swal-select-item.selected {
    background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--secondary))) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--primary-alpha, rgba(79, 70, 229, 0.25));
}

/* =====================================================
   MOBILE TOUCH & ANTI-ZOOM STABILIZATION ENGINE
   ===================================================== */
html, body {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* Prevenir retraso de 300ms y double-tap zoom en elementos interactivos */
a, button, input, select, textarea, .btn, .btn-primary, .btn-ghost, .biz-card, .tab-btn, .sidebar-nav a, .cc-add-card-slot, .brand-item, .glass-card, [onclick] {
    touch-action: manipulation;
}

/* Prevenir auto-zoom de iOS Safari al hacer focus en inputs/formularios (requiere mín 16px) */
@media (max-width: 768px) {
    input, select, textarea, .profile-input, .swal2-input, .swal2-select, .swal2-textarea, .form-input, .cc-input {
        font-size: 16px !important;
    }

    /* Blindaje contra desplazamiento huérfano del viewport en iOS Safari durante modales */
    html.swal2-shown,
    body.swal2-shown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    body.swal2-height-auto {
        height: 100% !important;
        height: 100dvh !important;
    }
}

/* =====================================================
   COMPACT & MODERN LOGOUT / REVOCATION MODAL
   ===================================================== */
.compact-logout-modal {
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
    padding: 1.75rem 1.5rem !important;
}

.compact-logout-modal .swal2-actions {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
    justify-content: center !important;
}

.compact-logout-modal .swal2-confirm,
.compact-logout-modal .swal2-cancel {
    border-radius: 10px !important;
    padding: 0.7rem 1.5rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-width: 130px !important;
    transition: all 0.2s ease !important;
}

.compact-logout-modal .swal2-cancel {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
}

.compact-logout-modal .swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--text-main, #ffffff) !important;
}

/* =====================================================
   RESPONSIVE MODAL ENHANCEMENTS FOR MOBILE SCREENS
   ===================================================== */
@media (max-width: 600px) {
    .swal2-popup {
        width: 92% !important;
        max-width: 380px !important;
        padding: 1.25rem 0.85rem !important;
        border-radius: 16px !important;
    }
    .swal2-popup .swal2-html-container {
        padding: 0 !important;
        margin: 0.5rem 0 0 0 !important;
        font-size: 0.86rem !important;
    }
    .swal2-popup .swal2-title {
        font-size: 1.2rem !important;
        padding: 0.25rem 0 0 0 !important;
    }
}

/* =====================================================
   PROFILE MODAL MOBILE & DESKTOP STYLING
   ===================================================== */
.profile-modal-swal {
    border-radius: 20px !important;
    padding: 1.5rem 1.25rem !important;
}

.profile-modal-swal .swal2-actions {
    display: flex !important;
    gap: 0.75rem !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 1.25rem !important;
}

.profile-modal-swal .swal2-confirm,
.profile-modal-swal .swal2-cancel {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-width: 130px !important;
    box-shadow: none !important;
}

.profile-modal-swal .swal2-cancel {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted, #94a3b8) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
}

.profile-modal-swal .swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--text-main, #ffffff) !important;
}

@media (max-width: 580px) {
    .profile-modal-swal {
        width: 94% !important;
        max-width: 400px !important;
        padding: 1.15rem 0.8rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .profile-modal-swal .swal2-actions {
        margin-top: 0.9rem !important;
        gap: 0.5rem !important;
    }
    .profile-modal-swal .swal2-confirm,
    .profile-modal-swal .swal2-cancel {
        padding: 0.65rem 0.9rem !important;
        font-size: 0.82rem !important;
        min-width: 105px !important;
    }
}

/* =====================================================
   ACTIVE SESSIONS & DEVICES SECURITY MODAL THEME ENGINE
   ===================================================== */
.devices-list-container {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 14px;
    padding: 0.75rem 0.65rem 0.15rem;
    margin-bottom: 1.15rem;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-color);
}

[data-theme="light"] .devices-list-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.session-device-card {
    background: var(--bg-surface-light, rgba(30, 41, 59, 0.7));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.6rem;
    text-align: left;
    transition: all 0.2s ease;
}

[data-theme="light"] .session-device-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.session-device-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0284c7;
}

[data-theme="light"] .session-device-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.session-current-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-sizing: border-box;
    flex-shrink: 0;
}

[data-theme="light"] .session-current-badge {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.session-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #34d399;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 2px 7px;
    border-radius: 12px;
}

[data-theme="light"] .session-active-pill {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.session-offline-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 2px 7px;
    border-radius: 12px;
}

[data-theme="light"] .session-offline-pill {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.session-ip-badge {
    font-size: 0.73rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 6px;
    border-radius: 4px;
    color: #38bdf8;
    font-weight: 600;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

[data-theme="light"] .session-ip-badge {
    background: #f1f5f9;
    color: #0369a1;
    border: 1px solid #cbd5e1;
}

.session-danger-card {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.85rem;
    text-align: left;
}

[data-theme="light"] .session-danger-card {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.session-danger-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.65rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-danger-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
}

[data-theme="light"] .session-danger-btn {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

[data-theme="light"] .session-danger-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

/* ============================================================
   MODALES COMPACTOS Y BOTONES SWEETALERT MODERNOS
   ============================================================ */
.compact-logout-modal {
    border-radius: 18px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45) !important;
    padding: 1.5rem 1.25rem !important;
}

.compact-swal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 1.25rem !important;
    padding: 0 !important;
}

.compact-swal-confirm-btn,
.compact-swal-cancel-btn {
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 0.65rem 1.25rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 130px !important;
    flex: 1 !important;
    max-width: 160px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
}

.compact-swal-confirm-btn {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
}

.compact-swal-confirm-btn:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
}

.compact-swal-cancel-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main, #f8fafc) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
}

[data-theme="light"] .compact-swal-cancel-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

.compact-swal-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] .compact-swal-cancel-btn:hover {
    background: #e2e8f0 !important;
}

/* ============================================================
   TARJETAS DE SOPORTE COMPACTAS Y MODERNAS
   ============================================================ */
.support-channel-card {
    padding: 1.25rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
    min-height: auto !important;
}

.support-channel-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.support-channel-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.support-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-channel-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    color: var(--text-main) !important;
    line-height: 1.2 !important;
}

.support-channel-meta {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.support-channel-action {
    width: 100% !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   DROPDOWN MODERNO DE FILTRO POR INDUSTRIA (MARKETPLACE & ADMIN)
   ========================================================================== */
.mod-dropdown-wrap {
    position: relative;
    user-select: none;
}
.mod-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    height: 44px;
    padding: 0 1.15rem;
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    color: var(--text-main, #f8fafc);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}
.mod-dropdown-btn:hover {
    border-color: var(--primary);
    background: var(--bg-surface-light, #334155);
}
.mod-dropdown-btn:focus,
.mod-dropdown-btn.open {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.mod-dd-left {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.mod-dd-filter-icon {
    width: 17px;
    height: 17px;
    color: var(--primary);
    flex-shrink: 0;
}
.mod-dd-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.mod-dropdown-btn.open .mod-dd-chevron {
    transform: rotate(180deg);
}
.mod-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 275px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.45rem;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform-origin: top right;
    animation: modMenuPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modMenuPop {
    from { opacity: 0; transform: scale(0.96) translateY(-5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.mod-dd-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.45rem 0.65rem 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mod-dd-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.16s ease;
}
.mod-dd-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}
.mod-dd-item.active {
    background: var(--primary-bg, rgba(2, 132, 199, 0.15));
    color: var(--primary);
    font-weight: 600;
}
.mod-dd-item-left {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.mod-dd-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mod-dd-icon svg,
.mod-dd-icon i {
    width: 17px !important;
    height: 17px !important;
    display: block;
}
.mod-dd-trigger-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.mod-dd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mod-dd-item.active .mod-dd-badge {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Soporte para Tema Claro */
[data-theme="light"] .mod-dropdown-btn {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .mod-dropdown-btn:hover {
    background: #f8fafc;
    border-color: var(--primary);
}
[data-theme="light"] .mod-dropdown-menu {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .mod-dd-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: #64748b;
}
[data-theme="light"] .mod-dd-item {
    color: #1e293b;
}
[data-theme="light"] .mod-dd-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #0f172a;
}
[data-theme="light"] .mod-dd-badge {
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mod-dd-item.active {
    background: var(--primary-bg, rgba(2, 132, 199, 0.12));
    color: var(--primary);
}
[data-theme="light"] .mod-dd-item.active .mod-dd-badge {
    background: var(--primary);
    color: #ffffff;
}

@media (max-width: 640px) {
    .mkt-header-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .mkt-header-toolbar .mod-dropdown-wrap {
        width: 100%;
    }
    .mkt-header-toolbar .mod-dropdown-btn {
        width: 100%;
    }
    .mkt-header-toolbar .mod-dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* ==========================================================================
   EVA — ASISTENTE EJECUTIVA VIRTUAL (PANEL DE CLIENTE)
   Estética EVE: Blanco Perla, Cian Eléctrico (#06b6d4 / #38bdf8), Orbe Futurista
   ========================================================================== */

@keyframes evaPulseGlow {
    0%, 100% {
        box-shadow: 0 8px 24px -4px rgba(6, 182, 212, 0.45), 0 0 16px rgba(56, 189, 248, 0.35);
    }
    50% {
        box-shadow: 0 10px 32px -2px rgba(6, 182, 212, 0.7), 0 0 24px rgba(56, 189, 248, 0.55);
    }
}

@keyframes evaOrbFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes evaDotPulse {
    0%, 80%, 100% {
        transform: scale(0.65);
        opacity: 0.4;
    }
    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Botón Flotante de Activación (Orbe Circular Compacto en PC y Móvil) */
.eva-trigger-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    border: 1.5px solid rgba(6, 182, 212, 0.45);
    color: #0f172a;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 25px -4px rgba(6, 182, 212, 0.45), 0 0 16px rgba(56, 189, 248, 0.35);
    animation: evaPulseGlow 3.5s infinite ease-in-out;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    outline: none;
}

.eva-trigger-btn:hover {
    transform: translateY(-2px) scale(1.06);
    border-color: #06b6d4;
    box-shadow: 0 12px 36px -2px rgba(6, 182, 212, 0.65), 0 0 24px rgba(56, 189, 248, 0.5);
}

.eva-trigger-btn:active {
    transform: translateY(0) scale(0.96);
}

/* Punto Online en el botón de Eva */
.eva-trigger-online-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #ffffff;
    box-shadow: 0 0 8px #10b981;
    z-index: 3;
}

[data-theme="dark"] .eva-trigger-online-dot {
    border-color: #0f172a;
}

/* Orbe / Cabeza de Eva en el botón */
.eva-avatar-orb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e0f2fe 60%, #bae6fd 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* Visera negra brillante con ojos cian estilo EVE */
.eva-visor {
    width: 26px;
    height: 14px;
    border-radius: 12px;
    background: #090d16;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(6, 182, 212, 0.6);
}

.eva-eye {
    width: 6px;
    height: 3px;
    background: #38bdf8;
    border-radius: 3px;
    box-shadow: 0 0 6px #38bdf8, 0 0 10px #06b6d4;
    animation: evaEyeBlink 5s infinite;
}

@keyframes evaEyeBlink {
    0%, 96%, 100% {
        transform: scaleY(1);
    }
    98% {
        transform: scaleY(0.1);
    }
}

/* Modo oscuro para botón flotante */
[data-theme="dark"] .eva-trigger-btn {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 8px 26px -4px rgba(6, 182, 212, 0.4), 0 0 16px rgba(6, 182, 212, 0.2);
}

/* ==========================================================================
   BOCADILLO FLOTANTE DE BIENVENIDA DE EVA (SPEECH BUBBLE / NUDGE)
   ========================================================================== */
.eva-welcome-bubble {
    position: fixed;
    bottom: 28px;
    right: 94px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #0f172a;
    padding: 12px 34px 12px 16px;
    border-radius: 18px;
    box-shadow: 0 14px 40px -6px rgba(6, 182, 212, 0.25), 0 6px 18px rgba(15, 23, 42, 0.08);
    border: 1.5px solid rgba(6, 182, 212, 0.3);
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 290px;
    z-index: 9998;
    cursor: pointer;
    animation: evaBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.eva-welcome-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px -4px rgba(6, 182, 212, 0.35);
    border-color: #06b6d4;
}

.eva-welcome-bubble::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 20px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-right: 1.5px solid rgba(6, 182, 212, 0.3);
    border-bottom: 1.5px solid rgba(6, 182, 212, 0.3);
    transform: rotate(-45deg);
}

[data-theme="dark"] .eva-welcome-bubble {
    background: rgba(15, 23, 42, 0.96);
    color: #f1f5f9;
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 16px 45px -6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 182, 212, 0.2);
}

[data-theme="dark"] .eva-welcome-bubble::after {
    background: #0f172a;
    border-right-color: rgba(6, 182, 212, 0.35);
    border-bottom-color: rgba(6, 182, 212, 0.35);
}

.eva-welcome-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
}

.eva-welcome-close:hover {
    color: #0891b2;
    background: rgba(6, 182, 212, 0.12);
}

.eva-welcome-bubble strong {
    color: #0891b2;
}

[data-theme="dark"] .eva-welcome-bubble strong {
    color: #38bdf8;
}

@keyframes evaBubbleIn {
    from { opacity: 0; transform: scale(0.88) translateX(12px); }
    to { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes evaBubbleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* ==========================================================================
   VENTANA MODAL DEL CHAT DE EVA
   ========================================================================== */
.eva-chat-window {
    position: fixed;
    bottom: 88px;
    right: 24px;
    width: 410px;
    max-width: calc(100vw - 32px);
    height: 620px;
    max-height: calc(100vh - 110px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(6, 182, 212, 0.28);
    border-radius: 24px;
    box-shadow: 0 25px 60px -12px rgba(6, 182, 212, 0.28), 0 12px 32px -4px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}

.eva-chat-window.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

[data-theme="dark"] .eva-chat-window {
    background: rgba(11, 19, 43, 0.96);
    border-color: rgba(6, 182, 212, 0.32);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.65), 0 0 25px rgba(6, 182, 212, 0.2);
    color: #f1f5f9;
}

/* Cabecera del Chat */
.eva-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.16);
    position: relative;
    user-select: none;
}

.eva-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eva-header-orb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e0f2fe 60%, #bae6fd 100%);
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: evaOrbFloat 4s infinite ease-in-out;
}

.eva-header-titles {
    display: flex;
    flex-direction: column;
}

.eva-header-name {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0f172a;
}

[data-theme="dark"] .eva-header-name {
    color: #ffffff;
}

.eva-header-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    color: #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eva-header-sub {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

[data-theme="dark"] .eva-header-sub {
    color: #94a3b8;
}

.eva-header-sub::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

/* Botones de Cabecera */
.eva-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eva-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.eva-icon-btn:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #0891b2;
}

[data-theme="dark"] .eva-icon-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-theme="dark"] .eva-icon-btn:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.4);
    color: #38bdf8;
}

/* Cuerpo de Mensajes */
.eva-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}

.eva-chat-messages::-webkit-scrollbar {
    width: 5px;
}
.eva-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.2);
    border-radius: 4px;
}

/* Burbujas de Mensaje */
.eva-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    animation: evaMsgFade 0.3s ease-out;
}

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

.eva-msg-user {
    align-self: flex-end;
}

.eva-msg-bot {
    align-self: flex-start;
}

.eva-msg-user .eva-bubble {
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
    padding: 11px 15px;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
    word-break: break-word;
}

.eva-msg-bot .eva-bubble {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    box-shadow: 0 4px 18px rgba(6, 182, 212, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    word-break: break-word;
}

[data-theme="dark"] .eva-msg-bot .eva-bubble {
    background: rgba(15, 23, 42, 0.85);
    color: #f1f5f9;
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.eva-msg-bot .eva-bubble strong {
    color: #0284c7;
    font-weight: 700;
}

[data-theme="dark"] .eva-msg-bot .eva-bubble strong {
    color: #38bdf8;
}

.eva-msg-bot .eva-bubble ul,
.eva-msg-bot .eva-bubble ol {
    margin: 6px 0 6px 18px;
    padding: 0;
}

.eva-msg-bot .eva-bubble li {
    margin-bottom: 4px;
}

.eva-msg-bot .eva-bubble a {
    color: #0891b2;
    text-decoration: underline;
    font-weight: 600;
}

[data-theme="dark"] .eva-msg-bot .eva-bubble a {
    color: #38bdf8;
}

/* Botón CTA dentro de mensajes (WhatsApp u otra acción) */
.eva-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.eva-cta-wa {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}

.eva-cta-wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.45);
}

/* Indicador de Escritura */
.eva-typing-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
    padding: 10px 14px;
    width: fit-content;
}

.eva-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.eva-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06b6d4;
    animation: evaDotPulse 1.4s infinite ease-in-out both;
}

.eva-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.eva-typing-dot:nth-child(2) { animation-delay: -0.16s; }

.eva-typing-text {
    font-size: 0.78rem;
    color: #0891b2;
    font-weight: 600;
}

[data-theme="dark"] .eva-typing-text {
    color: #38bdf8;
}

/* Chips de Sugerencias Rápidas */
.eva-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.eva-chip {
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.22);
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #0891b2;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.eva-chip:hover {
    background: rgba(6, 182, 212, 0.18);
    border-color: #06b6d4;
    color: #0284c7;
    transform: translateY(-1px);
}

[data-theme="dark"] .eva-chip {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
    color: #38bdf8;
}

[data-theme="dark"] .eva-chip:hover {
    background: rgba(6, 182, 212, 0.25);
    color: #ffffff;
}

/* Pie / Input Area */
.eva-input-area {
    padding: 12px 16px 16px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-top: 1px solid rgba(6, 182, 212, 0.14);
}

[data-theme="dark"] .eva-input-area {
    background: linear-gradient(180deg, rgba(11, 19, 43, 0) 0%, rgba(11, 19, 43, 0.85) 100%);
    border-top-color: rgba(6, 182, 212, 0.2);
}

.eva-input-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid rgba(6, 182, 212, 0.28);
    border-radius: 9999px;
    padding: 4px 6px 4px 16px;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.08);
    transition: all 0.2s ease;
}

[data-theme="dark"] .eva-input-form {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(6, 182, 212, 0.35);
}

.eva-input-form:focus-within {
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.eva-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    font-family: inherit;
    color: #0f172a;
}

[data-theme="dark"] .eva-input {
    color: #f1f5f9;
}

.eva-input::placeholder {
    color: #94a3b8;
}

.eva-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.eva-send-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.5);
}

.eva-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.eva-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsividad en Dispositivos Móviles */
@media (max-width: 640px) {
    .eva-trigger-btn {
        bottom: 18px;
        right: 18px;
        width: 52px;
        height: 52px;
    }
    .eva-avatar-orb {
        width: 40px;
        height: 40px;
    }
    .eva-welcome-bubble {
        bottom: 82px !important;
        right: 18px !important;
        left: auto !important;
        max-width: calc(100vw - 36px) !important;
        padding: 10px 30px 10px 14px !important;
        font-size: 0.82rem !important;
    }
    .eva-welcome-bubble::after {
        right: 20px !important;
        bottom: -7px !important;
        transform: rotate(45deg) !important;
    }
    .eva-chat-window {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100% !important;
        padding-bottom: var(--eva-keyboard-inset, 0px) !important;
        border-radius: 0 !important;
        border: none !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
        will-change: padding-bottom;
        z-index: 100000 !important;
    }
    .eva-header {
        padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 14px !important;
        border-radius: 0;
        flex-shrink: 0;
    }
}