/* ========================================================================== DARK MODE — override de tokens vía [data-theme="dark"] en Marketplace Theme ========================================================================== */ :root[data-theme="dark"] { --mp-bg: #0b1020; --mp-bg-alt: #0e1426; --mp-surface: #131a2e; --mp-surface-2: #18203a; --mp-surface-3: #1c2540; --mp-surface-glass: rgba(19, 26, 46, 0.6); --mp-surface-glass-strong: rgba(19, 26, 46, 0.85); --mp-glass-border: rgba(255, 255, 255, 0.1); --mp-header-bg: rgba(11, 16, 32, 0.7); --mp-text: #eef2ff; --mp-text-soft: #cbd5e1; --mp-text-muted: #8b97b5; --mp-text-inverse: #0f172a; --mp-border: rgba(255, 255, 255, 0.08); --mp-border-strong: rgba(255, 255, 255, 0.16); --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --mp-shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.45); --mp-shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.6); } /* Ajustes específicos en dark */ :root[data-theme="dark"] .mp-card-action { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #cbd5e1; } :root[data-theme="dark"] .mp-haction-badge { box-shadow: 0 0 0 2px var(--mp-surface); } :root[data-theme="dark"] .mp-card-media { background: var(--mp-surface-3); } :root[data-theme="dark"] .mp-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); } :root[data-theme="dark"] .mp-topbar { background: #060a16; } /* Logo: alterna entre versión clara y oscura según el tema activo */ .mp-logo-img-dark { display: none; } :root[data-theme="dark"] .mp-logo-img:not(.mp-logo-img-dark) { display: none; } :root[data-theme="dark"] .mp-logo-img-dark { display: block; } /* Glass adaptativo: cuando el modo es oscuro, el header semitransparente usa color oscuro */ :root[data-theme="dark"] .mp-header { background: var(--mp-header-bg); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-theme="dark"] .mp-glass, :root[data-theme="dark"] .mp-glass-strong, :root[data-theme="dark"] .mp-btn-glass, :root[data-theme="dark"] .mp-header, :root[data-theme="dark"] .mp-search-dropdown, :root[data-theme="dark"] .mp-megamenu, :root[data-theme="dark"] .mp-modal-box, :root[data-theme="dark"] .mp-drawer, :root[data-theme="dark"] .mp-mini-cart-panel, :root[data-theme="dark"] .mp-bottom-nav, :root[data-theme="dark"] .mp-filter-panel, :root[data-theme="dark"] .mp-search-overlay { background: var(--mp-surface); } } /* Icono del toggle: mostrar sol en dark */ :root[data-theme="dark"] .mp-theme-toggle .mp-icon-moon { display: block; } :root[data-theme="dark"] .mp-theme-toggle .mp-icon-sun { display: none; }