/* ============================================
   VARIABLES CSS PARA MODO OSCURO
   ============================================ */

body.webchat-dark-mode {
    /* Fondos oscuros */
    --webchat-dark-bg: #0d0d18;
    --webchat-dark-bg-primary: #0d0d18;
    --webchat-dark-bg-secondary: #16162a;
    --webchat-dark-card: #1a1a2e;
    --webchat-dark-hover: rgba(139, 92, 246, 0.12);
    
    /* Textos oscuros */
    --webchat-dark-text: #e9ecef;
    --webchat-dark-text-primary: #ffffff;
    --webchat-dark-text-secondary: #a0a0b0;
    --webchat-dark-text-muted: #6b7280;
    
    /* Bordes oscuros */
    --webchat-dark-border: rgba(139, 92, 246, 0.2);
    --webchat-dark-border-light: rgba(139, 92, 246, 0.1);
    
    /* Acentos oscuros */
    --webchat-dark-accent: #8b5cf6;
    --webchat-dark-accent-light: #a78bfa;
    
    /* Redefinir variables base para modo oscuro */
    --webchat-bg: var(--webchat-dark-bg);
    --webchat-surface: var(--webchat-dark-card);
    --webchat-text: var(--webchat-dark-text);
    --webchat-text-secondary: var(--webchat-dark-text-secondary);
    --webchat-text-muted: var(--webchat-dark-text-muted);
    --webchat-border: var(--webchat-dark-border);
    --webchat-border-light: var(--webchat-dark-border-light);
}

/* ============================================
   ESTILOS GLOBALES PARA MODO OSCURO
   ============================================ */

/* Fondo principal del body */
body.webchat-dark-mode {
    background: var(--webchat-dark-bg) !important;
    color: var(--webchat-dark-text) !important;
}

/* Shell principal */
body.webchat-dark-mode .webchat-shell {
    background: var(--webchat-dark-bg) !important;
    box-shadow: 0 0 0 1px var(--webchat-dark-border) inset;
}

/* Header */
body.webchat-dark-mode .webchat-header {
    background: linear-gradient(180deg, rgba(13, 13, 24, 0.95) 0%, rgba(22, 22, 42, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: var(--webchat-dark-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Nombre de usuario en header */
body.webchat-dark-mode .webchat-user-name {
    background: linear-gradient(135deg, var(--webchat-dark-text) 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.webchat-dark-mode .webchat-user-details {
    color: var(--webchat-dark-text-secondary);
}

/* Botones del header */
body.webchat-dark-mode .webchat-icon-btn {
    background: rgba(139, 92, 246, 0.1);
    color: var(--webchat-dark-text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.webchat-dark-mode .webchat-icon-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-header-action-btn {
    background: rgba(139, 92, 246, 0.1);
    color: var(--webchat-dark-text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.webchat-dark-mode .webchat-header-action-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Cards generales */
body.webchat-dark-mode .webchat-card {
    background: var(--webchat-dark-card) !important;
    border-color: var(--webchat-dark-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.webchat-dark-mode .webchat-card-title {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-card-subtitle {
    color: var(--webchat-dark-text-secondary);
}

/* Cards de estadísticas */
body.webchat-dark-mode .webchat-stat-card {
    background: var(--webchat-dark-card) !important;
    border-color: var(--webchat-dark-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.webchat-dark-mode .webchat-stat-label {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-stat-value {
    color: var(--webchat-dark-text-primary);
}

/* Items de cuenta */
body.webchat-dark-mode .webchat-account-item {
    background: var(--webchat-dark-card) !important;
    border-color: var(--webchat-dark-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.webchat-dark-mode .webchat-account-item:hover {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25);
    transform: translateY(-4px);
}

/* Textos generales */
body.webchat-dark-mode h1,
body.webchat-dark-mode h2,
body.webchat-dark-mode h3,
body.webchat-dark-mode h4,
body.webchat-dark-mode h5,
body.webchat-dark-mode h6 {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode p {
    color: var(--webchat-dark-text);
}

/* Tabbar (menú inferior) */
body.webchat-dark-mode .webchat-tabbar {
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(13, 13, 24, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top-color: var(--webchat-dark-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

body.webchat-dark-mode .webchat-tab-link,
body.webchat-dark-mode .webchat-tabbar button,
body.webchat-dark-mode .webchat-tabbar a {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-tab-link.active,
body.webchat-dark-mode .webchat-tabbar button.active,
body.webchat-dark-mode .webchat-tabbar a.active {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.15);
}

body.webchat-dark-mode .webchat-tab-link:hover,
body.webchat-dark-mode .webchat-tabbar button:hover,
body.webchat-dark-mode .webchat-tabbar a:hover {
    background: rgba(139, 92, 246, 0.1);
}

body.webchat-dark-mode .webchat-tab-link:active,
body.webchat-dark-mode .webchat-tabbar button:active,
body.webchat-dark-mode .webchat-tabbar a:active {
    background: rgba(139, 92, 246, 0.2);
}

/* Botones de acción */
body.webchat-dark-mode .webchat-action-btn {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.webchat-dark-mode .webchat-action-primary {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

body.webchat-dark-mode .webchat-action-primary:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

body.webchat-dark-mode .webchat-action-secondary {
    background: var(--webchat-dark-card);
    color: var(--webchat-dark-text);
    border-color: var(--webchat-dark-border);
}

/* Sección principal */
body.webchat-dark-mode .webchat-main {
    background: var(--webchat-dark-bg);
}

/* Banners y alertas */
body.webchat-dark-mode .webchat-birthday-banner,
body.webchat-dark-mode .webchat-referral-banner,
body.webchat-dark-mode .webchat-referred-benefit-banner {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Alertas de eventos */
/* Alertas en "Membresías y accesos" - Modo Oscuro */
body.webchat-dark-mode .webchat-account-alert {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Alertas NO VISTAS en modo oscuro - muy destacadas */
body.webchat-dark-mode .webchat-account-alert:not(.seen) {
    background: rgba(245, 158, 11, 0.35);
    border-left-color: #fbbf24;
    border-left-width: 5px;
    color: #fef3c7;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

body.webchat-dark-mode .webchat-account-alert:not(.seen):hover {
    background: rgba(245, 158, 11, 0.45);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* Alertas VISTAS en modo oscuro - sutiles */
body.webchat-dark-mode .webchat-account-alert.seen {
    background: rgba(16, 185, 129, 0.2);
    border-left-color: #34d399;
    border-left-width: 3px;
    color: #a7f3d0;
    font-weight: 500;
    opacity: 0.8;
}

body.webchat-dark-mode .webchat-account-alert.seen:hover {
    background: rgba(16, 185, 129, 0.25);
    opacity: 1;
}

body.webchat-dark-mode .webchat-account-alert svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Campos de cuenta */
body.webchat-dark-mode .webchat-account-field {
    border-bottom-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-account-field label {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-account-value {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-account-field.email-field,
body.webchat-dark-mode .webchat-account-field.password-field {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-account-field.email-field:active,
body.webchat-dark-mode .webchat-account-field.password-field:active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #a78bfa;
}

/* Badges */
body.webchat-dark-mode .webchat-badge {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.webchat-dark-mode .webchat-badge-combo {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(167, 139, 250, 0.15));
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.3);
}

body.webchat-dark-mode .webchat-badge-individual {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.15));
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Banners */
body.webchat-dark-mode .webchat-referral-banner {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.12));
    border-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-referral-copy h2 {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-referral-copy span {
    color: var(--webchat-dark-text-secondary);
}

/* Panel de notificaciones */
body.webchat-dark-mode .webchat-notifications-panel {
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(13, 13, 24, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-notifications-header {
    border-bottom-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-notifications-header h3 {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-notification-item {
    border-bottom-color: var(--webchat-dark-border);
    background: rgba(255, 255, 255, 0.02);
}

body.webchat-dark-mode .webchat-notification-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Notificaciones NO VISTAS en modo oscuro - muy destacadas */
body.webchat-dark-mode .webchat-notification-item.unread {
    background: rgba(139, 92, 246, 0.18);
    border-left-color: #a78bfa;
    border-left-width: 5px;
    opacity: 1;
}

body.webchat-dark-mode .webchat-notification-item.unread:hover {
    background: rgba(139, 92, 246, 0.25);
}

/* Notificaciones VISTAS en modo oscuro - sutiles */
body.webchat-dark-mode .webchat-notification-item:not(.unread) {
    background: rgba(255, 255, 255, 0.01);
    border-left-color: var(--webchat-dark-border);
    opacity: 0.6;
}

body.webchat-dark-mode .webchat-notification-item:not(.unread):hover {
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.8;
}

body.webchat-dark-mode .webchat-notification-title {
    color: var(--webchat-dark-text-primary);
    font-weight: 600;
}

/* Títulos más destacados para no vistas */
body.webchat-dark-mode .webchat-notification-item.unread .webchat-notification-title {
    font-weight: 700;
    color: #e9d5ff;
}

/* Títulos más sutiles para vistas */
body.webchat-dark-mode .webchat-notification-item:not(.unread) .webchat-notification-title {
    font-weight: 500;
    color: var(--webchat-dark-text-secondary);
    opacity: 0.7;
}

body.webchat-dark-mode .webchat-notification-time {
    color: var(--webchat-dark-text-secondary);
    opacity: 0.8;
}

body.webchat-dark-mode .webchat-notification-item:not(.unread) .webchat-notification-time {
    opacity: 0.5;
}

body.webchat-dark-mode .webchat-notification-description {
    color: var(--webchat-dark-text-secondary);
    opacity: 0.9;
}

body.webchat-dark-mode .webchat-notification-item:not(.unread) .webchat-notification-description {
    opacity: 0.6;
}

body.webchat-dark-mode .webchat-notification-icon {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

body.webchat-dark-mode .webchat-notification-item.unread .webchat-notification-icon {
    background: rgba(139, 92, 246, 0.3);
    border-color: #a78bfa;
    border-width: 2px;
}

body.webchat-dark-mode .webchat-notification-item:not(.unread) .webchat-notification-icon {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--webchat-dark-border);
    opacity: 0.6;
}

body.webchat-dark-mode .webchat-notifications-empty {
    color: var(--webchat-dark-text-secondary);
    opacity: 0.7;
}

/* Modal de permisos de notificaciones en modo oscuro */
body.webchat-dark-mode .webchat-notification-permission-modal {
    background: rgba(0, 0, 0, 0.8);
}

body.webchat-dark-mode .webchat-notification-permission-content {
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(13, 13, 24, 0.98) 100%);
    border: 1px solid var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-notification-permission-content h3 {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-notification-permission-content p {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-notification-permission-deny {
    background: rgba(139, 92, 246, 0.1);
    color: var(--webchat-dark-text-secondary);
    border-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-notification-permission-deny:hover {
    background: rgba(139, 92, 246, 0.2);
}

/* Botones de copiar y toggle */
body.webchat-dark-mode .webchat-copy-field-btn,
body.webchat-dark-mode .webchat-toggle-password-btn {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-copy-field-btn:active,
body.webchat-dark-mode .webchat-toggle-password-btn:active {
    background: #a78bfa;
    color: #ffffff;
}

body.webchat-dark-mode .webchat-copy-field-btn.copied {
    background: var(--webchat-success);
    color: #ffffff;
}

/* Acciones de cuenta */
body.webchat-dark-mode .webchat-account-action-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.webchat-dark-mode .webchat-account-action-primary {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

body.webchat-dark-mode .webchat-account-action-btn:not(.webchat-account-action-primary) {
    background: var(--webchat-dark-card);
    color: var(--webchat-dark-text);
    border-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-account-action-btn:not(.webchat-account-action-primary):hover {
    background: var(--webchat-dark-hover);
}

/* Footer */
body.webchat-dark-mode .webchat-footer {
    color: var(--webchat-dark-text-secondary);
    border-top-color: var(--webchat-dark-border);
}

/* Secciones */
body.webchat-dark-mode .webchat-top-section,
body.webchat-dark-mode .webchat-middle-section {
    background: transparent;
}

/* Quick actions */
body.webchat-dark-mode .webchat-quick-actions {
    background: transparent;
}

/* Sidebar (si está visible) */
body.webchat-dark-mode .webchat-sidebar {
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(13, 13, 24, 0.98) 100%);
    border-right-color: var(--webchat-dark-border);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4);
}

body.webchat-dark-mode .webchat-sidebar-header {
    border-bottom-color: var(--webchat-dark-border);
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(13, 13, 24, 0.98) 100%);
}

body.webchat-dark-mode .webchat-sidebar-nav-item {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-nav-item:hover {
    background: var(--webchat-dark-hover);
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-sidebar-nav-item.active {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* Sidebar en modo oscuro - duplicado removido, usar estilos de arriba */

body.webchat-dark-mode .webchat-sidebar-user-name {
    color: var(--webchat-dark-text-primary);
}

body.webchat-dark-mode .webchat-sidebar-user-details {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-action-btn {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--webchat-dark-border);
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-action-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.25);
}

body.webchat-dark-mode .webchat-sidebar-action-btn svg {
    transition: transform 0.25s ease;
}

body.webchat-dark-mode .webchat-sidebar-action-btn:hover svg {
    transform: scale(1.1);
}

body.webchat-dark-mode .webchat-sidebar-stat {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%);
    border-color: var(--webchat-dark-border);
    transition: all 0.25s ease;
}

body.webchat-dark-mode .webchat-sidebar-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

body.webchat-dark-mode .webchat-sidebar-stat-value {
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-sidebar-stat-label {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-nav-item {
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-nav-item:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #a78bfa;
    border-right-color: #a78bfa;
    font-weight: 700;
}

body.webchat-dark-mode .webchat-sidebar-nav-item:hover {
    background: rgba(139, 92, 246, 0.12);
    transform: translateX(2px);
}

body.webchat-dark-mode .webchat-sidebar-nav-icon svg {
    stroke: currentColor;
}

body.webchat-dark-mode .webchat-sidebar-btn-primary {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

body.webchat-dark-mode .webchat-sidebar-btn-secondary {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--webchat-dark-border);
    color: var(--webchat-dark-text);
}

body.webchat-dark-mode .webchat-sidebar-btn-secondary:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: #a78bfa;
}

body.webchat-dark-mode .webchat-sidebar-footer {
    border-top-color: var(--webchat-dark-border);
    background: transparent;
}

body.webchat-dark-mode .webchat-sidebar-dark-mode-toggle {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--webchat-dark-border);
    color: var(--webchat-dark-text-secondary);
}

body.webchat-dark-mode .webchat-sidebar-dark-mode-toggle:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.25);
}

body.webchat-dark-mode .webchat-sidebar-dark-mode-toggle:hover svg {
    transform: rotate(15deg) scale(1.1);
}

/* ============================================
   CHAT - Modo Oscuro PC
   ============================================ */

@media (min-width: 769px) {
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item {
        background: var(--webchat-dark-card);
        border-color: rgba(139, 92, 246, 0.2);
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item:hover {
        background: rgba(139, 92, 246, 0.12);
        border-color: rgba(139, 92, 246, 0.4);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item.active {
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.08) 100%);
        border-left-color: #a78bfa;
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item.closed {
        opacity: 0.6;
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item.closed:hover {
        opacity: 0.9;
    }
    
    body.webchat-dark-mode .webchat-chat-item-channel {
        background: rgba(139, 92, 246, 0.15);
        color: #a78bfa;
    }
    
    body.webchat-dark-mode .webchat-chat-status-badge.active-badge {
        background: rgba(16, 185, 129, 0.2);
    }
    
    body.webchat-dark-mode .webchat-chat-status-badge.closed-badge {
        background: rgba(107, 114, 128, 0.2);
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item.active .webchat-chat-item-status {
        background: rgba(16, 185, 129, 0.2);
        color: #4ade80;
    }
    
    body.webchat-dark-mode .webchat-chats-unified-list .webchat-chat-item.closed .webchat-chat-item-status {
        background: rgba(107, 114, 128, 0.15);
        color: #9ca3af;
    }
}

/* Mejoras específicas para mobile en modo oscuro */
@media (max-width: 768px) {
    body.webchat-dark-mode .webchat-card {
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    
    body.webchat-dark-mode .webchat-account-item {
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
    }
    
    body.webchat-dark-mode .webchat-memberships-section .webchat-card {
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    
    body.webchat-dark-mode .webchat-tabbar {
        border-radius: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================
   MEJORAS PARA DESKTOP EN MODO OSCURO
   ============================================ */

@media (min-width: 769px) {
    /* Main container en modo oscuro */
    body.webchat-dark-mode .webchat-main {
        background: var(--webchat-dark-bg) !important;
    }
    
    /* Cards mejoradas en desktop */
    body.webchat-dark-mode .webchat-card {
        background: var(--webchat-dark-card) !important;
        border-color: var(--webchat-dark-border) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Account items mejorados */
    body.webchat-dark-mode .webchat-account-item {
        background: var(--webchat-dark-card) !important;
        border-color: var(--webchat-dark-border) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    body.webchat-dark-mode .webchat-account-item:hover {
        background: rgba(139, 92, 246, 0.15) !important;
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25) !important;
    }
    
    /* Banners mejorados */
    body.webchat-dark-mode .webchat-birthday-banner,
    body.webchat-dark-mode .webchat-referred-benefit-banner,
    body.webchat-dark-mode .webchat-referral-banner {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    body.webchat-dark-mode .webchat-birthday-banner:hover,
    body.webchat-dark-mode .webchat-referred-benefit-banner:hover,
    body.webchat-dark-mode .webchat-referral-banner:hover {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Sidebar header y footer con fondo transparente para que se vea el gradiente del sidebar */
    body.webchat-dark-mode .webchat-sidebar-header {
        background: transparent !important;
    }
    
    body.webchat-dark-mode .webchat-sidebar-footer {
        background: transparent !important;
    }
    
    /* Asegurar que los botones del sidebar tengan fondo oscuro */
    body.webchat-dark-mode .webchat-sidebar-action-btn {
        background: rgba(139, 92, 246, 0.1) !important;
        border-color: var(--webchat-dark-border) !important;
    }
    
    /* Stat cards en sidebar */
    body.webchat-dark-mode .webchat-sidebar-stat {
        background: rgba(139, 92, 246, 0.08) !important;
        border-color: var(--webchat-dark-border) !important;
    }
    
    /* Botones de acción rápida */
    body.webchat-dark-mode .webchat-sidebar-btn-secondary {
        background: rgba(139, 92, 246, 0.08) !important;
        border-color: var(--webchat-dark-border) !important;
    }
    
    /* Profile cards específicas */
    body.webchat-dark-mode .webchat-profile-info-card,
    body.webchat-dark-mode .webchat-profile-password-card {
        background: var(--webchat-dark-card) !important;
        border-color: var(--webchat-dark-border) !important;
    }
    
    /* Inputs en modo oscuro */
    body.webchat-dark-mode .webchat-input,
    body.webchat-dark-mode .webchat-input-readonly {
        background: rgba(139, 92, 246, 0.08) !important;
        border-color: var(--webchat-dark-border) !important;
        color: var(--webchat-dark-text-primary) !important;
    }
    
    body.webchat-dark-mode .webchat-input::placeholder {
        color: var(--webchat-dark-text-secondary) !important;
        opacity: 0.6 !important;
    }
    
    /* Labels en modo oscuro */
    body.webchat-dark-mode .webchat-label {
        color: var(--webchat-dark-text-secondary) !important;
    }
}