/* * ═══════════════════════════════════════════════════════════════════ * WAPIO DESKTOP — SISTEMA DE TEMAS / desktop_themes.css * * Selector raíz: body.wapio-body.{tema} * Completamente independiente de themes.css (mobile). * * USO EN PHP (ax_carta_desktop.php): * Theme) && $design->Theme != "" ? $design->Theme : "theme-default"; ?> * * * TEMAS DISPONIBLES: * "theme-default" → Verde Wapio (default si no hay tema) * "theme-black" → Dark premium * "theme-brown" → Caramelo / Craft * "theme-amber" → Dorado vibrante * "theme-green" → Bosque profundo * "theme-pink" → Rosado moderno * ═══════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ VARIABLES POR TEMA Cada tema redefine el mismo juego de variables. Los componentes de abajo SOLO usan variables, nunca colores hardcodeados → agregar un tema nuevo = copiar un bloque y cambiar valores. ════════════════════════════════════════════════════════ */ /* ── DEFAULT — Verde Wapio ── */ body.wapio-body.theme-default { --dt-bg: #f7f9f8; --dt-bg-2: #f0f5f2; --dt-bg-3: #e4ede8; --dt-surface: #ffffff; --dt-border: rgba(0,0,0,0.07); --dt-border-2: rgba(0,0,0,0.13); --dt-primary: #00C853; --dt-primary-dark: #00a040; --dt-primary-light: #e0f7ea; --dt-grad: linear-gradient(135deg, #00C853 0%, #00BFA5 100%); --dt-grad-hover: linear-gradient(135deg, #00a040 0%, #009e8a 100%); --dt-on-primary: #ffffff; --dt-text-1: #0D1B2A; --dt-text-2: #3a5244; --dt-text-3: #6b8c7c; --dt-price-bg: #00C853; --dt-price-text: #003a18; --dt-price-label: rgba(0,0,0,0.55); --dt-card-hover-shadow: 0 4px 20px rgba(0,200,83,0.15); --dt-card-hover-border: #00C853; --dt-cat-active-bg: #e0f7ea; --dt-cat-active-text: #00a040; --dt-cat-active-border: #00C853; --dt-sidebar-bg: #ffffff; --dt-cart-bg: #ffffff; --dt-overlay: rgba(0, 30, 15, 0.38); --dt-cta-shadow: 0 4px 16px rgba(0,200,83,0.35); --dt-add-btn-bg: #00C853; --dt-add-btn-color: #003a18; --dt-section-count-bg: #f0f5f2; --dt-scrollbar-thumb: #c8ddd2; --dt-scrollbar-hover: #00C853; --dt-marquee-bg: rgba(0,200,83,0.10); --dt-marquee-border: rgba(0,200,83,0.18); --dt-marquee-text: #00a040; --dt-sweet-confirm: #00C853; --dt-sweet-confirm-text: #003a18; } /* ── THEME-BLACK — Dark premium ── */ body.wapio-body.theme-black { --dt-bg: #0f0f1a; --dt-bg-2: #16213e; --dt-bg-3: #1e2a4a; --dt-surface: #1a1a2e; --dt-border: rgba(255,255,255,0.08); --dt-border-2: rgba(255,255,255,0.15); --dt-primary: #00d4ff; --dt-primary-dark: #00a8cc; --dt-primary-light: rgba(0,212,255,0.12); --dt-grad: linear-gradient(135deg, #00d4ff 0%, #7b61ff 100%); --dt-grad-hover: linear-gradient(135deg, #00a8cc 0%, #5e48cc 100%); --dt-on-primary: #0f0f1a; --dt-text-1: #e8e8f8; --dt-text-2: #b0b0d0; --dt-text-3: #7070a0; --dt-price-bg: #00d4ff; --dt-price-text: #0f0f1a; --dt-price-label: rgba(255,255,255,0.50); --dt-card-hover-shadow: 0 4px 24px rgba(0,212,255,0.20); --dt-card-hover-border: #00d4ff; --dt-cat-active-bg: rgba(0,212,255,0.10); --dt-cat-active-text: #00d4ff; --dt-cat-active-border: #00d4ff; --dt-sidebar-bg: #1a1a2e; --dt-cart-bg: #1a1a2e; --dt-overlay: rgba(0, 0, 20, 0.55); --dt-cta-shadow: 0 4px 20px rgba(0,212,255,0.35); --dt-add-btn-bg: #00d4ff; --dt-add-btn-color: #0f0f1a; --dt-section-count-bg: #16213e; --dt-scrollbar-thumb: #2a2a4a; --dt-scrollbar-hover: #00d4ff; --dt-marquee-bg: rgba(0,212,255,0.08); --dt-marquee-border: rgba(0,212,255,0.18); --dt-marquee-text: #00d4ff; --dt-sweet-confirm: #00d4ff; --dt-sweet-confirm-text: #0f0f1a; } /* ── THEME-BROWN — Caramelo / Craft / Bistró ── */ body.wapio-body.theme-brown { --dt-bg: #fdf6ec; --dt-bg-2: #f5ead6; --dt-bg-3: #ecdac0; --dt-surface: #fffaf4; --dt-border: rgba(160,96,30,0.12); --dt-border-2: rgba(160,96,30,0.22); --dt-primary: #c97d3a; --dt-primary-dark: #a0601e; --dt-primary-light: #f5e0c0; --dt-grad: linear-gradient(135deg, #c97d3a 0%, #e8a85a 100%); --dt-grad-hover: linear-gradient(135deg, #a0601e 0%, #c98a3a 100%); --dt-on-primary: #ffffff; --dt-text-1: #2c1a00; --dt-text-2: #5c3d15; --dt-text-3: #9a7550; --dt-price-bg: #c97d3a; --dt-price-text: #fff; --dt-price-label: rgba(255,255,255,0.70); --dt-card-hover-shadow: 0 4px 20px rgba(180,100,20,0.18); --dt-card-hover-border: #c97d3a; --dt-cat-active-bg: #f5e0c0; --dt-cat-active-text: #a0601e; --dt-cat-active-border: #c97d3a; --dt-sidebar-bg: #fffaf4; --dt-cart-bg: #fffaf4; --dt-overlay: rgba(40, 15, 0, 0.42); --dt-cta-shadow: 0 4px 16px rgba(180,100,20,0.38); --dt-add-btn-bg: #c97d3a; --dt-add-btn-color: #ffffff; --dt-section-count-bg: #f5ead6; --dt-scrollbar-thumb: #e0ccb0; --dt-scrollbar-hover: #c97d3a; --dt-marquee-bg: rgba(201,125,58,0.10); --dt-marquee-border: rgba(201,125,58,0.20); --dt-marquee-text: #a0601e; --dt-sweet-confirm: #c97d3a; --dt-sweet-confirm-text: #ffffff; } /* ── THEME-AMBER — Dorado vibrante ── */ body.wapio-body.theme-amber { --dt-bg: #fffbf0; --dt-bg-2: #fef3c7; --dt-bg-3: #fde68a; --dt-surface: #ffffff; --dt-border: rgba(200,140,0,0.12); --dt-border-2: rgba(200,140,0,0.22); --dt-primary: #f59e0b; --dt-primary-dark: #d97706; --dt-primary-light: #fef3c7; --dt-grad: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); --dt-grad-hover: linear-gradient(135deg, #d97706 0%, #c73232 100%); --dt-on-primary: #ffffff; --dt-text-1: #1c1009; --dt-text-2: #4a2e04; --dt-text-3: #a07030; --dt-price-bg: #f59e0b; --dt-price-text: #fff; --dt-price-label: rgba(255,255,255,0.70); --dt-card-hover-shadow: 0 4px 20px rgba(240,150,0,0.22); --dt-card-hover-border: #f59e0b; --dt-cat-active-bg: #fef3c7; --dt-cat-active-text: #d97706; --dt-cat-active-border: #f59e0b; --dt-sidebar-bg: #ffffff; --dt-cart-bg: #ffffff; --dt-overlay: rgba(30, 10, 0, 0.40); --dt-cta-shadow: 0 4px 18px rgba(245,158,11,0.40); --dt-add-btn-bg: #f59e0b; --dt-add-btn-color: #ffffff; --dt-section-count-bg: #fef3c7; --dt-scrollbar-thumb: #fcd34d; --dt-scrollbar-hover: #f59e0b; --dt-marquee-bg: rgba(245,158,11,0.10); --dt-marquee-border: rgba(245,158,11,0.20); --dt-marquee-text: #d97706; --dt-sweet-confirm: #f59e0b; --dt-sweet-confirm-text: #ffffff; } /* ── THEME-GREEN — Bosque profundo / Orgánico ── */ body.wapio-body.theme-green { --dt-bg: #f0f7ec; --dt-bg-2: #e4f0dd; --dt-bg-3: #cce4c2; --dt-surface: #fafef7; --dt-border: rgba(30,100,30,0.10); --dt-border-2: rgba(30,100,30,0.20); --dt-primary: #2d9e4f; --dt-primary-dark: #1e7a38; --dt-primary-light: #d8f0cc; --dt-grad: linear-gradient(135deg, #2d9e4f 0%, #76c442 100%); --dt-grad-hover: linear-gradient(135deg, #1e7a38 0%, #5a9e30 100%); --dt-on-primary: #ffffff; --dt-text-1: #0d2010; --dt-text-2: #2a5230; --dt-text-3: #5a7e5c; --dt-price-bg: #2d9e4f; --dt-price-text: #fff; --dt-price-label: rgba(255,255,255,0.70); --dt-card-hover-shadow: 0 4px 20px rgba(40,150,60,0.18); --dt-card-hover-border: #2d9e4f; --dt-cat-active-bg: #d8f0cc; --dt-cat-active-text: #1e5c25; --dt-cat-active-border: #2d9e4f; --dt-sidebar-bg: #fafef7; --dt-cart-bg: #fafef7; --dt-overlay: rgba(5, 20, 5, 0.42); --dt-cta-shadow: 0 4px 16px rgba(45,158,79,0.38); --dt-add-btn-bg: #2d9e4f; --dt-add-btn-color: #ffffff; --dt-section-count-bg: #e4f0dd; --dt-scrollbar-thumb: #b8d8aa; --dt-scrollbar-hover: #2d9e4f; --dt-marquee-bg: rgba(45,158,79,0.10); --dt-marquee-border: rgba(45,158,79,0.20); --dt-marquee-text: #1e7a38; --dt-sweet-confirm: #2d9e4f; --dt-sweet-confirm-text: #ffffff; } /* ── THEME-PINK — Rosado moderno / Editorial ── */ body.wapio-body.theme-pink { --dt-bg: #fff0f6; --dt-bg-2: #ffe4ef; --dt-bg-3: #fecde3; --dt-surface: #ffffff; --dt-border: rgba(200,0,100,0.10); --dt-border-2: rgba(200,0,100,0.20); --dt-primary: #e91e8c; --dt-primary-dark: #c4156e; --dt-primary-light: #ffe4ef; --dt-grad: linear-gradient(135deg, #e91e8c 0%, #ff6eb4 100%); --dt-grad-hover: linear-gradient(135deg, #c4156e 0%, #e85095 100%); --dt-on-primary: #ffffff; --dt-text-1: #1a0010; --dt-text-2: #5a1030; --dt-text-3: #a0507a; --dt-price-bg: #e91e8c; --dt-price-text: #fff; --dt-price-label: rgba(255,255,255,0.70); --dt-card-hover-shadow: 0 4px 20px rgba(233,30,140,0.18); --dt-card-hover-border: #e91e8c; --dt-cat-active-bg: #ffe4ef; --dt-cat-active-text: #c4156e; --dt-cat-active-border: #e91e8c; --dt-sidebar-bg: #ffffff; --dt-cart-bg: #ffffff; --dt-overlay: rgba(40, 0, 20, 0.42); --dt-cta-shadow: 0 4px 18px rgba(233,30,140,0.38); --dt-add-btn-bg: #e91e8c; --dt-add-btn-color: #ffffff; --dt-section-count-bg: #ffe4ef; --dt-scrollbar-thumb: #f9a8d4; --dt-scrollbar-hover: #e91e8c; --dt-marquee-bg: rgba(233,30,140,0.08); --dt-marquee-border: rgba(233,30,140,0.18); --dt-marquee-text: #c4156e; --dt-sweet-confirm: #e91e8c; --dt-sweet-confirm-text: #ffffff; } /* ════════════════════════════════════════════════════════ COMPONENTES — consumen solo variables dt-* ════════════════════════════════════════════════════════ */ /* ══════════════════════════════════ BODY / ROOT ══════════════════════════════════ */ body.wapio-body { background-color: var(--dt-bg) !important; background-image: none !important; color: var(--dt-text-1); transition: background-color 0.3s ease, color 0.3s ease; } body.wapio-body .dt-root { background-color: var(--dt-bg) !important; } /* ══════════════════════════════════ SCROLLBARS ══════════════════════════════════ */ body.wapio-body ::-webkit-scrollbar-thumb { background: var(--dt-scrollbar-thumb) !important; } body.wapio-body ::-webkit-scrollbar-thumb:hover { background: var(--dt-scrollbar-hover) !important; } body.wapio-body ::-webkit-scrollbar-track { background: transparent !important; } /* ══════════════════════════════════ SIDEBAR ══════════════════════════════════ */ body.wapio-body .dt-sidebar { background-color: var(--dt-sidebar-bg) !important; border-right-color: var(--dt-border) !important; } /* Banner del sidebar */ body.wapio-body .dt-brand-banner-overlay { background: linear-gradient( to bottom, rgba(0,0,0,0.06) 0%, var(--dt-overlay) 100% ) !important; } /* Nombre y dirección */ body.wapio-body .dt-brand-name { color: var(--dt-text-1) !important; } body.wapio-body .dt-brand-address { color: var(--dt-text-3) !important; } /* Borde inferior del bloque brand */ body.wapio-body .dt-brand { border-bottom-color: var(--dt-border) !important; } /* Íconos sociales */ body.wapio-body .dt-social a { color: var(--dt-text-3) !important; transition: color 0.18s ease; } body.wapio-body .dt-social a:hover { color: var(--dt-primary) !important; } /* Etiqueta "Menú" */ body.wapio-body .dt-nav-label { color: var(--dt-text-3) !important; } /* Ítem de categoría */ body.wapio-body .dt-cat-item { color: var(--dt-text-2) !important; border-left-color: transparent !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; text-decoration: none; } body.wapio-body .dt-cat-item:hover { background-color: var(--dt-bg-2) !important; color: var(--dt-text-1) !important; text-decoration: none; } body.wapio-body .dt-cat-item.active { background-color: var(--dt-cat-active-bg) !important; border-left-color: var(--dt-cat-active-border) !important; color: var(--dt-cat-active-text) !important; font-weight: 700; } body.wapio-body .dt-cat-name { color: inherit !important; } body.wapio-body .dt-cat-item.active .dt-cat-name { color: var(--dt-cat-active-text) !important; } /* Footer del sidebar */ body.wapio-body .dt-sidebar-footer { border-top-color: var(--dt-border) !important; } body.wapio-body .dt-powered { color: var(--dt-text-3) !important; } body.wapio-body .dt-powered a { color: var(--dt-text-3) !important; transition: color 0.18s ease; } body.wapio-body .dt-powered a:hover { color: var(--dt-primary) !important; } /* ══════════════════════════════════ MAIN — fondo del catálogo ══════════════════════════════════ */ body.wapio-body .dt-main { background-color: var(--dt-bg) !important; } /* ══════════════════════════════════ ENCABEZADO DE SECCIÓN ══════════════════════════════════ */ body.wapio-body .dt-section-header { border-bottom-color: var(--dt-border) !important; } body.wapio-body .dt-section-title { color: var(--dt-text-1) !important; } body.wapio-body .dt-section-count { color: var(--dt-text-3) !important; background-color: var(--dt-section-count-bg) !important; border-color: var(--dt-border) !important; } body.wapio-body .dt-section-thumb { border-color: var(--dt-border) !important; } /* ══════════════════════════════════ TARJETA DE PRODUCTO ══════════════════════════════════ */ body.wapio-body .dt-card { background-color: var(--dt-surface) !important; border-color: var(--dt-border) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } body.wapio-body .dt-card:hover { border-color: var(--dt-card-hover-border) !important; box-shadow: var(--dt-card-hover-shadow) !important; transform: translateY(-2px); } body.wapio-body .dt-card:active { transform: scale(0.98); } /* Imagen */ body.wapio-body .dt-card-img-wrap { background-color: var(--dt-bg-2) !important; } /* Nombre */ body.wapio-body .dt-card-name { color: var(--dt-text-1) !important; } /* Descripción */ body.wapio-body .dt-card-desc { color: var(--dt-text-3) !important; } /* Botón "+" */ body.wapio-body .dt-add-icon { background: var(--dt-add-btn-bg) !important; color: var(--dt-add-btn-color) !important; box-shadow: var(--dt-cta-shadow) !important; transition: filter 0.18s ease, transform 0.18s ease; } body.wapio-body .dt-card:hover .dt-add-icon { filter: brightness(1.08); transform: scale(1.12) rotate(90deg); } /* ── Chip de precio ── */ body.wapio-body .dt-price-chip { background-color: var(--dt-price-bg) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important; } body.wapio-body .dt-price-label { color: var(--dt-price-label) !important; } body.wapio-body .dt-price-value { color: var(--dt-price-text) !important; /* anular el gradiente de texto que usa wapio_client_desktop.css */ background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--dt-price-text) !important; background-clip: unset !important; } /* ══════════════════════════════════ HEADER BANNER (si se reactiva) ══════════════════════════════════ */ body.wapio-body .dt-header-overlay { background: linear-gradient( to bottom, rgba(0,0,0,0.04) 0%, var(--dt-overlay) 100% ) !important; } /* Marquee */ body.wapio-body .dt-marquee { background-color: var(--dt-marquee-bg) !important; border-top-color: var(--dt-marquee-border) !important; } body.wapio-body .dt-marquee-inner span { color: var(--dt-marquee-text) !important; } /* ══════════════════════════════════ PANEL CARRITO ══════════════════════════════════ */ body.wapio-body .dt-cart-panel { background-color: var(--dt-cart-bg) !important; border-left-color: var(--dt-border) !important; } /* Header del panel */ body.wapio-body .dt-cart-header { background-color: var(--dt-surface) !important; border-bottom-color: var(--dt-border) !important; } body.wapio-body .dt-cart-title { color: var(--dt-text-1) !important; } body.wapio-body .dt-cart-title i { color: var(--dt-primary) !important; } body.wapio-body .dt-cart-badge { background: var(--dt-grad) !important; color: var(--dt-on-primary) !important; } body.wapio-body .dt-cart-close { color: var(--dt-text-3) !important; transition: background 0.18s ease, color 0.18s ease; } body.wapio-body .dt-cart-close:hover { background-color: var(--dt-bg-2) !important; color: var(--dt-text-1) !important; } /* Body del panel */ body.wapio-body .dt-cart-body { background-color: var(--dt-cart-bg) !important; } /* ── wp-cart-view dentro del panel ── */ body.wapio-body #dt-cart-body .wp-cart-view { background-color: var(--dt-bg) !important; } body.wapio-body #dt-cart-body .wp-cart-header { background-color: var(--dt-surface) !important; border-bottom-color: var(--dt-border) !important; } body.wapio-body #dt-cart-body .wp-cart-title { color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .wp-cart-subtitle { color: var(--dt-text-3) !important; } body.wapio-body #dt-cart-body .wp-cart-footer { background-color: var(--dt-surface) !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important; } /* Cards del carrito */ body.wapio-body #dt-cart-body .wp-cart-card { background-color: var(--dt-surface) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; } body.wapio-body #dt-cart-body .wp-cart-card-name { color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .wp-cart-card-unit { color: var(--dt-text-3) !important; } body.wapio-body #dt-cart-body .wp-cart-card-price { color: var(--dt-text-1) !important; } /* Stepper mini */ body.wapio-body #dt-cart-body .wp-mini-btn { background-color: var(--dt-bg-2) !important; color: var(--dt-primary) !important; transition: background 0.15s ease; } body.wapio-body #dt-cart-body .wp-mini-btn:hover { background-color: var(--dt-primary-light) !important; } body.wapio-body #dt-cart-body .wp-mini-num { color: var(--dt-text-1) !important; } /* Variety tag */ body.wapio-body #dt-cart-body .wp-variety-tag { background-color: var(--dt-bg-2) !important; color: var(--dt-text-3) !important; } /* Delivery opts */ body.wapio-body #dt-cart-body .wp-delivery-opt { border-color: var(--dt-border) !important; background-color: var(--dt-bg) !important; color: var(--dt-text-3) !important; transition: all 0.18s ease; } body.wapio-body #dt-cart-body .wp-delivery-opt.active { border-color: var(--dt-primary) !important; background-color: var(--dt-primary-light) !important; color: var(--dt-primary-dark) !important; } /* Select de pago */ body.wapio-body #dt-cart-body .wp-pay-select { background-color: var(--dt-bg) !important; border-color: var(--dt-border) !important; color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .wp-pay-select:focus { border-color: var(--dt-primary) !important; } /* Totales */ body.wapio-body #dt-cart-body .wp-total-label { color: var(--dt-text-3) !important; } body.wapio-body #dt-cart-body .wp-total-value { color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .wp-total-row.final .wp-total-label { color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .wp-total-row.final .wp-total-value { color: var(--dt-primary-dark) !important; } /* Mesa badge */ body.wapio-body #dt-cart-body .wp-mesa-badge span { background: var(--dt-grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Botón principal (CTA) */ body.wapio-body #dt-cart-body .wp-cta-primary { background: var(--dt-grad) !important; color: var(--dt-on-primary) !important; box-shadow: var(--dt-cta-shadow) !important; transition: filter 0.18s ease, transform 0.12s ease; } body.wapio-body #dt-cart-body .wp-cta-primary:hover { filter: brightness(1.07); transform: translateY(-1px); } body.wapio-body #dt-cart-body .wp-cta-primary:active { transform: scale(0.98); } /* Botón secundario */ body.wapio-body #dt-cart-body .wp-cta-secondary { border-color: var(--dt-border) !important; color: var(--dt-text-3) !important; transition: border-color 0.18s ease, color 0.18s ease; } body.wapio-body #dt-cart-body .wp-cta-secondary:hover { border-color: var(--dt-primary) !important; color: var(--dt-primary) !important; } /* ── checkout dentro del panel ── */ body.wapio-body #dt-cart-body .checkout-overlay { background-color: var(--dt-bg) !important; } body.wapio-body #dt-cart-body .checkout-header { background-color: var(--dt-surface) !important; border-bottom-color: var(--dt-border) !important; } body.wapio-body #dt-cart-body .checkout-header h2 { color: var(--dt-text-1) !important; } body.wapio-body #dt-cart-body .checkout-footer { background-color: var(--dt-surface) !important; border-top-color: var(--dt-border) !important; } body.wapio-body #dt-cart-body .form-section { background-color: var(--dt-surface) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } body.wapio-body #dt-cart-body .section-title { color: var(--dt-primary) !important; } body.wapio-body #dt-cart-body .input-pill { background-color: var(--dt-bg) !important; border-color: var(--dt-border) !important; color: var(--dt-text-1) !important; transition: border-color 0.18s ease; } body.wapio-body #dt-cart-body .input-pill:focus { border-color: var(--dt-primary) !important; background-color: var(--dt-surface) !important; outline: none; } body.wapio-body #dt-cart-body .input-pill::placeholder { color: var(--dt-text-3) !important; } body.wapio-body #dt-cart-body .row-detail { color: var(--dt-text-3) !important; } body.wapio-body #dt-cart-body .row-total { color: var(--dt-text-1) !important; border-top-color: var(--dt-border) !important; } body.wapio-body #dt-cart-body .btn-send-wa { /* WA siempre verde marca — no cambia con el tema */ background: #25D366 !important; color: #fff !important; } body.wapio-body #dt-cart-body .btn-back-store { color: var(--dt-text-3) !important; transition: color 0.18s ease; } body.wapio-body #dt-cart-body .btn-back-store:hover { color: var(--dt-primary) !important; } /* Botón cerrar X del checkout */ body.wapio-body #dt-cart-body .btn-close-x { background-color: var(--dt-bg-2) !important; color: var(--dt-text-3) !important; transition: background 0.18s ease; } body.wapio-body #dt-cart-body .btn-close-x:hover { background-color: var(--dt-bg-3) !important; } /* ══════════════════════════════════ MODAL DE PRODUCTO (page_container) ══════════════════════════════════ */ body.wapio-body #page_container .modal-content { background-color: var(--dt-surface) !important; border-color: var(--dt-border) !important; } /* Imagen / gallery */ body.wapio-body #page_container .wp-gallery { background-color: var(--dt-bg-2) !important; } /* Nombre y descripción */ body.wapio-body #page_container .wp-product-name { color: var(--dt-text-1) !important; } body.wapio-body #page_container .wp-description { color: var(--dt-text-2) !important; } /* Precio: gradiente del tema */ body.wapio-body #page_container .wp-price-value { background: var(--dt-grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } body.wapio-body #page_container .wp-price-label { color: var(--dt-text-3) !important; -webkit-text-fill-color: var(--dt-text-3) !important; } /* Size chips */ body.wapio-body #page_container .wp-size-chip { background-color: var(--dt-bg) !important; border-color: var(--dt-border) !important; color: var(--dt-text-3) !important; } body.wapio-body #page_container .wp-size-chip strong { color: var(--dt-primary) !important; } /* Select de variante */ body.wapio-body #page_container .wp-select-native { background-color: var(--dt-bg) !important; border-color: var(--dt-border) !important; color: var(--dt-text-1) !important; transition: border-color 0.18s ease; } body.wapio-body #page_container .wp-select-native:focus { border-color: var(--dt-primary) !important; } /* Footer del modal */ body.wapio-body #page_container .wp-footer { background-color: var(--dt-surface) !important; border-top-color: var(--dt-border) !important; } /* Stepper de cantidad */ body.wapio-body #page_container .wp-qty { background-color: var(--dt-bg) !important; border-color: var(--dt-border) !important; } body.wapio-body #page_container .wp-qty-btn { color: var(--dt-primary) !important; transition: background 0.15s ease; } body.wapio-body #page_container .wp-qty-btn:hover { background-color: var(--dt-primary-light) !important; } body.wapio-body #page_container .wp-qty-num { color: var(--dt-primary) !important; -webkit-text-fill-color: var(--dt-primary) !important; } /* Botón Agregar al pedido */ body.wapio-body #page_container .wp-add-btn { background: var(--dt-grad) !important; color: var(--dt-on-primary) !important; box-shadow: var(--dt-cta-shadow) !important; transition: filter 0.18s ease, transform 0.12s ease; } body.wapio-body #page_container .wp-add-btn:hover { filter: brightness(1.07); transform: translateY(-1px); } body.wapio-body #page_container .wp-add-btn:active { transform: scale(0.97); } body.wapio-body #page_container .wp-add-btn:disabled { opacity: 0.45; filter: none; transform: none; cursor: not-allowed; } /* Divider */ body.wapio-body #page_container .wp-divider { background-color: var(--dt-border) !important; } /* ══════════════════════════════════ BARRA CARRITO FLOTANTE (#mycart) Completa — fondo gradiente del tema ══════════════════════════════════ */ body.wapio-body #mycart { background: var(--dt-grad) !important; box-shadow: var(--dt-cta-shadow) !important; border-radius: 16px !important; transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.15s ease; } body.wapio-body #mycart:hover { transform: translateX(-50%) translateY(-2px) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.22) !important; filter: brightness(1.06); } body.wapio-body #mycart:active { transform: translateX(-50%) scale(0.98) !important; } body.wapio-body #mycart #cartCount { background: rgba(0,0,0,0.22) !important; color: var(--dt-on-primary) !important; border-radius: 6px !important; font-weight: 800; } body.wapio-body #mycart #cartText { color: var(--dt-on-primary) !important; font-weight: 700; } body.wapio-body #mycart #cartAmount { color: rgba(255,255,255,0.92) !important; font-weight: 700; } body.wapio-body #mycart .material-icons { color: var(--dt-on-primary) !important; } /* Dark: sombra cian más pronunciada */ body.wapio-body.theme-black #mycart { box-shadow: 0 4px 24px rgba(0,212,255,0.35) !important; } body.wapio-body.theme-black #mycart:hover { box-shadow: 0 8px 36px rgba(0,212,255,0.45) !important; } /* WA flotante — siempre verde marca */ body.wapio-body .wachat, body.wapio-body .b_wa { background: #25D366 !important; } /* ══════════════════════════════════ SWEETALERT ══════════════════════════════════ */ body.wapio-body .sweet-alert { background-color: var(--dt-surface) !important; border-color: var(--dt-border) !important; } body.wapio-body .sweet-alert h2 { color: var(--dt-text-1) !important; } body.wapio-body .sweet-alert p { color: var(--dt-text-2) !important; } body.wapio-body .sweet-alert button.confirm { background: var(--dt-sweet-confirm) !important; color: var(--dt-sweet-confirm-text) !important; border-radius: 8px !important; box-shadow: none !important; } body.wapio-body .sweet-alert button.cancel { background-color: var(--dt-bg-2) !important; color: var(--dt-text-2) !important; border-radius: 8px !important; box-shadow: none !important; } /* Dark: sweetalert */ body.wapio-body.theme-black .sweet-alert { background-color: #1a1a2e !important; border-color: rgba(255,255,255,0.10) !important; } body.wapio-body.theme-black .sweet-alert h2 { color: #e8e8f8 !important; } body.wapio-body.theme-black .sweet-alert p { color: #b0b0d0 !important; } body.wapio-body.theme-black .sweet-overlay { background: rgba(0,0,10,0.65) !important; } /* ══════════════════════════════════ BOTÓN LLAMAR SERVICIO ══════════════════════════════════ */ body.wapio-body #b_info { background-color: var(--dt-primary-light) !important; border-color: var(--dt-border) !important; color: var(--dt-primary-dark) !important; transition: background 0.18s ease, border-color 0.18s ease; } body.wapio-body #b_info:hover { background-color: var(--dt-bg-3) !important; border-color: var(--dt-primary) !important; } /* ══════════════════════════════════ DARK — ajustes globales ══════════════════════════════════ */ /* Modal backdrop más oscuro */ body.wapio-body.theme-black #page_container .modal-backdrop.in { opacity: 0.65 !important; background-color: rgba(0,0,10,0.72) !important; } /* Cerrar modal */ body.wapio-body.theme-black #page_container .wp-close { background: rgba(230,230,255,0.15) !important; color: #e8e8f8 !important; } body.wapio-body.theme-black #page_container .wp-close:hover { background: rgba(230,230,255,0.28) !important; } /* Inputs en dark */ body.wapio-body.theme-black #dt-cart-body .input-pill { background-color: #16213e !important; border-color: rgba(255,255,255,0.12) !important; color: #e8e8f8 !important; } body.wapio-body.theme-black #dt-cart-body .input-pill::placeholder { color: #7070a0 !important; } /* ══════════════════════════════════════════════════════ MODAL DE VARIEDADES / ADICIONALES (ax_show_item_variety — cargado en #page_container) Sobreescribe todos los colores hardcodeados del