/* ============================================
   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: none;
}

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);
}

body.webchat-dark-mode .webchat-stat-card--loyalty .webchat-stat-icon-wrap {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

body.webchat-dark-mode .webchat-stat-card--chats .webchat-stat-icon-wrap {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

body.webchat-dark-mode .webchat-stat-card--memberships .webchat-stat-icon-wrap {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

body.webchat-dark-mode .webchat-stat-card--loyalty .webchat-stat-value { color: #c4b5fd; }
body.webchat-dark-mode .webchat-stat-card--chats .webchat-stat-value { color: #93c5fd; }
body.webchat-dark-mode .webchat-stat-card--memberships .webchat-stat-value { color: #6ee7b7; }

body.webchat-dark-mode .webchat-account-item-toggle {
    color: inherit;
}

body.webchat-dark-mode .webchat-account-item-chevron {
    color: #a78bfa;
}

/* Items de cuenta */
body.webchat-dark-mode .webchat-account-item {
    background: var(--webchat-dark-card) !important;
    border-color: rgba(139, 92, 246, 0.18);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.webchat-dark-mode .webchat-account-list .webchat-account-item {
    background: #1a1a2e !important;
    border-color: rgba(139, 92, 246, 0.22) !important;
}

body.webchat-dark-mode .webchat-account-item:hover {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

body.webchat-dark-mode .webchat-account-list .webchat-account-item-header--branded {
    background: color-mix(in srgb, var(--wc-account-brand) 16%, #141428) !important;
    border-bottom-color: rgba(139, 92, 246, 0.15) !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-account-item-title {
    color: #f1f5f9 !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-account-item-profile {
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-account-value {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
    color: #e2e8f0 !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-account-field label {
    color: rgba(148, 163, 184, 0.95) !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-copy-field-btn,
body.webchat-dark-mode .webchat-account-list .webchat-toggle-password-btn {
    background: rgba(139, 92, 246, 0.14) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
    color: #c4b5fd !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-copy-field-btn:active,
body.webchat-dark-mode .webchat-account-list .webchat-toggle-password-btn:active {
    background: rgba(139, 92, 246, 0.35) !important;
    color: #fff !important;
}

body.webchat-dark-mode .webchat-account-list .webchat-account-item-actions {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top-color: rgba(139, 92, 246, 0.12) !important;
}

body.webchat-dark-mode .webchat-combo-profiles .webchat-account-item {
    background: #16162a !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
}

body.webchat-dark-mode .webchat-combo-profiles .webchat-account-item-header--branded {
    background: color-mix(in srgb, var(--wc-account-brand) 16%, #141428) !important;
    border-bottom-color: rgba(139, 92, 246, 0.15) !important;
}

body.webchat-dark-mode .webchat-combo-profiles .webchat-account-value {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
    color: #e2e8f0 !important;
}

body.webchat-dark-mode .webchat-card--memberships {
    background: #141428 !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* 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-loyalty-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: transparent;
    border-color: transparent;
}

body.webchat-dark-mode .webchat-account-field.email-field:active,
body.webchat-dark-mode .webchat-account-field.password-field:active {
    background: transparent;
    border-color: transparent;
}

/* 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,
body.webchat-dark-mode .webchat-loyalty-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,
body.webchat-dark-mode .webchat-loyalty-copy h2 {
    color: var(--webchat-dark-text-primary);
}

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

body.webchat-dark-mode .webchat-referral-label,
body.webchat-dark-mode .webchat-loyalty-label {
    color: var(--webchat-dark-text-muted);
}

/* Panel de notificaciones */
body.webchat-dark-mode .webchat-notifications-dialog {
    background: var(--webchat-dark-bg);
}

body.webchat-dark-mode .webchat-notifications-scroll {
    background: var(--webchat-dark-bg);
}

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-notification-item {
    border-color: var(--webchat-dark-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.webchat-dark-mode .webchat-notification-meta {
    border-top-color: var(--webchat-dark-border);
}

body.webchat-dark-mode .webchat-notification-meta-label {
    color: var(--webchat-dark-text-muted);
}

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

body.webchat-dark-mode .webchat-notification-meta-value.webchat-notification-meta-email {
    color: #a78bfa;
}

body.webchat-dark-mode .webchat-notification-meta-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--webchat-dark-border);
    color: var(--webchat-dark-text-secondary);
}

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);
}

/* Botón de renovación en dark mode */
body.webchat-dark-mode .webchat-account-action-renew {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

body.webchat-dark-mode .webchat-account-action-renew:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5) !important;
}

body.webchat-dark-mode .webchat-account-action-renew svg {
    color: #ffffff !important;
}

/* 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,
    body.webchat-dark-mode .webchat-loyalty-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;
    }

    /* Modal de detalle de notificación */
    body.webchat-dark-mode .webchat-event-modal-overlay {
        background: rgba(0, 0, 0, 0.65) !important;
    }

    body.webchat-dark-mode .webchat-evt-changes {
        background: rgba(139, 92, 246, 0.1) !important;
        border-color: var(--webchat-dark-border) !important;
    }

    body.webchat-dark-mode .webchat-mark-all-read-btn {
        background: rgba(139, 92, 246, 0.12) !important;
        border-color: var(--webchat-dark-border) !important;
        color: var(--webchat-dark-accent-light) !important;
    }

    body.webchat-dark-mode .wc-platform-logo {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: var(--webchat-dark-border) !important;
    }

    body.webchat-dark-mode .webchat-card-header--app {
        background: linear-gradient(180deg, var(--webchat-dark-card) 0%, rgba(13, 13, 24, 0.6) 100%) !important;
    }

    body.webchat-dark-mode .webchat-card-header-pill {
        background: rgba(139, 92, 246, 0.18) !important;
        color: var(--webchat-dark-accent-light) !important;
    }
}

/* ============================================
   PEDIDOS DE TIENDA Y RENOVACIONES (MODO OSCURO)
   ============================================ */
body.webchat-dark-mode .webchat-store-order-card {
    background: #17172b !important;
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
body.webchat-dark-mode .webchat-store-order-card__title {
    color: #ffffff !important;
}
body.webchat-dark-mode .webchat-store-order-card__date {
    color: #cbd5e1 !important;
}
body.webchat-dark-mode .webchat-store-order-card__date i {
    color: #a78bfa !important;
}
body.webchat-dark-mode .webchat-store-order-card__date-badge {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
}
body.webchat-dark-mode .webchat-store-order-card__date-sep {
    color: #64748b !important;
}
body.webchat-dark-mode .webchat-store-order-card__date-time {
    color: #cbd5e1 !important;
}
body.webchat-dark-mode .webchat-store-order-card__times {
    gap: 4px !important;
}
body.webchat-dark-mode .webchat-store-order-card__times li {
    color: #cbd5e1 !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}
body.webchat-dark-mode .webchat-store-order-card__times strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body.webchat-dark-mode .webchat-store-order-card__head {
    border-bottom: 1px dashed rgba(139, 92, 246, 0.25) !important;
}
body.webchat-dark-mode .webchat-store-datum {
    background: rgba(139, 92, 246, 0.14) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    color: #cbd5e1 !important;
}
body.webchat-dark-mode .webchat-store-datum i.webchat-store-datum__ic {
    color: #a78bfa !important;
}
body.webchat-dark-mode .webchat-store-datum__val {
    color: #f1f5f9 !important;
}
body.webchat-dark-mode .webchat-store-datum__val strong {
    color: #ffffff !important;
}
body.webchat-dark-mode .webchat-store-status-badge--ok {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
body.webchat-dark-mode .webchat-store-status-badge--warn {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
body.webchat-dark-mode .webchat-store-status-badge--info {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
}
body.webchat-dark-mode .webchat-store-status-badge--muted {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
}
body.webchat-dark-mode .webchat-store-copy-btn {
    border-color: rgba(167, 139, 250, 0.4) !important;
    background: rgba(139, 92, 246, 0.15) !important;
    color: #c4b5fd !important;
}
body.webchat-dark-mode .webchat-store-copy-btn:hover {
    background: rgba(139, 92, 246, 0.3) !important;
    color: #ffffff !important;
}
body.webchat-dark-mode .webchat-store-orders-hint {
    color: #cbd5e1 !important;
}
body.webchat-dark-mode .webchat-renewal-card .webchat-store-order-card__date {
    color: #cbd5e1 !important;
}