/* ================================================================ Sanelii — Tema: Soft UI (Neumorfismo moderno) Inspirado en: fondo gris suave + tarjetas BLANCAS elevadas, sombras ultra-limpias, radios generosos, sin bordes duros. Activado cuando REGLA IRON: solo background / box-shadow / border / border-radius NUNCA padding, margin, width, height, font-size. ================================================================ */ /* ── Variables ─────────────────────────────────────────────── */ body[data-theme="neomorphism"] { --nm-bg: #FFFFFF; /* blanco puro — fondo de página */ --nm-surface: #FFFFFF; /* blanco puro — tarjetas flotantes */ --nm-border: rgba(0,0,0,.07); /* borde sutil para separar del bg */ /* Sombras — algo más pronunciadas al tener fondo blanco */ --nm-shadow-xs: 0 1px 6px rgba(0,0,0,.08); --nm-shadow-sm: 0 2px 12px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06); --nm-shadow: 0 4px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); --nm-shadow-lg: 0 8px 36px rgba(0,0,0,.14), 0 2px 10px rgba(0,0,0,.07); --nm-pressed: inset 0 2px 8px rgba(0,0,0,.08), inset 0 1px 3px rgba(0,0,0,.05); /* Radios — más redondeados */ --nm-r-card: 14px; --nm-r-elem: 10px; --nm-r-sm: 8px; --nm-r-pill: 50px; } /* ── 1. Fondo global ────────────────────────────────────────── */ body[data-theme="neomorphism"].layout-public, body[data-theme="neomorphism"] main.main { background: var(--nm-bg); } /* ── 2. Tarjetas de producto ────────────────────────────────── */ /* .product-card-wrap solo es wrapper — fondo coherente con página */ body[data-theme="neomorphism"] .product-card-wrap { background: transparent; } /* La tarjeta en sí — borde + sombra para destacar del fondo blanco */ body[data-theme="neomorphism"] .product-card { background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } body[data-theme="neomorphism"] .product-card:hover { box-shadow: var(--nm-shadow-lg); transform: translateY(-3px); border-color: transparent; } body[data-theme="neomorphism"] .product-card__media { background: var(--nm-surface); border-radius: var(--nm-r-card) var(--nm-r-card) 0 0; } /* Botón wishlist */ body[data-theme="neomorphism"] .product-card__wish { background: var(--nm-surface); border: none; border-radius: 50%; box-shadow: var(--nm-shadow-xs); } /* Quick-add */ body[data-theme="neomorphism"] .product-card__quick-add { background: var(--c-primary); border: none; border-radius: 0 0 var(--nm-r-card) var(--nm-r-card); } body[data-theme="neomorphism"] .product-card__quick-add--opts { background: var(--c-secondary); border-color: transparent; color: #fff; } body[data-theme="neomorphism"] .product-card__quick-add--out { background: #edeef1; border: none; } /* ── 3. Header ──────────────────────────────────────────────── */ /* Mantenemos el naranja de marca; solo mejoramos la sombra */ body[data-theme="neomorphism"] .site-header { box-shadow: 0 2px 12px rgba(0,0,0,.12); } /* Barra de búsqueda — blanca sobre el naranja, efecto elevado */ body[data-theme="neomorphism"] .site-search { background: var(--nm-surface); border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-pressed); } body[data-theme="neomorphism"] .site-search input { background: transparent; border: none; box-shadow: none; } body[data-theme="neomorphism"] .site-search button { background: transparent; box-shadow: none; } /* ── 4. Botones ─────────────────────────────────────────────── */ body[data-theme="neomorphism"] .btn--primary { border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-shadow-sm); } body[data-theme="neomorphism"] .btn--primary:hover { box-shadow: var(--nm-shadow); transform: translateY(-1px); } body[data-theme="neomorphism"] .btn--primary:active { box-shadow: var(--nm-pressed); transform: none; } body[data-theme="neomorphism"] .btn--ghost { background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-r-pill); box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .btn--ghost:hover { box-shadow: var(--nm-shadow-sm); } body[data-theme="neomorphism"] .btn--secondary { background: var(--nm-surface); border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .btn--secondary:hover { box-shadow: var(--nm-shadow-sm); } /* ── 5. Inputs y selects ────────────────────────────────────── */ body[data-theme="neomorphism"] input[type="text"], body[data-theme="neomorphism"] input[type="email"], body[data-theme="neomorphism"] input[type="number"], body[data-theme="neomorphism"] input[type="password"], body[data-theme="neomorphism"] input[type="tel"], body[data-theme="neomorphism"] select, body[data-theme="neomorphism"] textarea { background: var(--nm-surface); border: 1px solid rgba(0,0,0,.07); border-radius: var(--nm-r-sm); box-shadow: var(--nm-pressed); } body[data-theme="neomorphism"] input:focus, body[data-theme="neomorphism"] select:focus, body[data-theme="neomorphism"] textarea:focus { outline: none; border-color: rgba(138,43,226,.35); box-shadow: var(--nm-pressed), 0 0 0 3px rgba(138,43,226,.12); } /* ── 6. Sección home — sin sombra, fondo plano ─────────────── */ body[data-theme="neomorphism"] .home-section { background: transparent; border: none; box-shadow: none; } /* ── 7. Categorías (cat_strip) ──────────────────────────────── */ body[data-theme="neomorphism"] .cat-chip { background: var(--nm-surface); border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-shadow-xs); transition: box-shadow .18s, transform .15s; } body[data-theme="neomorphism"] .cat-chip:hover { box-shadow: var(--nm-shadow-sm); transform: translateY(-1px); } body[data-theme="neomorphism"] .cat-chip--active, body[data-theme="neomorphism"] .cat-chip.is-active { box-shadow: var(--nm-pressed); } /* ── 8. Benefits grid ───────────────────────────────────────── */ body[data-theme="neomorphism"] .benefit-item { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); } /* ── 9. Strip banners / promo-grid ──────────────────────────── */ body[data-theme="neomorphism"] .strip-banner { border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); } body[data-theme="neomorphism"] .promo-grid-item { border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); } /* ── 10. Hero slider ────────────────────────────────────────── */ body[data-theme="neomorphism"] .hero-slider-wrap { border-radius: var(--nm-r-card); overflow: hidden; box-shadow: var(--nm-shadow); } body[data-theme="neomorphism"] .hero-dots button { background: var(--nm-surface); border: none; box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .hero-dots button.is-active { background: var(--c-primary); box-shadow: none; } /* ── 11. Carrusel — botones prev/next ───────────────────────── */ body[data-theme="neomorphism"] .prod-carousel__btn { background: var(--nm-surface); border: none; border-radius: 50%; box-shadow: var(--nm-shadow-sm); transition: box-shadow .18s, transform .15s; } body[data-theme="neomorphism"] .prod-carousel__btn:hover { box-shadow: var(--nm-shadow); transform: scale(1.06); } body[data-theme="neomorphism"] .prod-carousel__btn:active { box-shadow: var(--nm-pressed); transform: scale(1); } /* ── 12. Flash Deals ────────────────────────────────────────── */ body[data-theme="neomorphism"] .flash-deals-block { border-radius: var(--nm-r-card); overflow: hidden; box-shadow: var(--nm-shadow); } body[data-theme="neomorphism"] .flash-deals-block__seg { background: rgba(255,255,255,.18); border-radius: 6px; } /* ── 13. Video shelf ────────────────────────────────────────── */ body[data-theme="neomorphism"] .video-card { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); transition: box-shadow .2s, transform .2s; } body[data-theme="neomorphism"] .video-card:hover { box-shadow: var(--nm-shadow-lg); transform: translateY(-3px); } body[data-theme="neomorphism"] .video-card__body { background: var(--nm-surface); } /* ── 14. Social trending ────────────────────────────────────── */ body[data-theme="neomorphism"] .social-card { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); transition: box-shadow .2s, transform .18s; } body[data-theme="neomorphism"] .social-card:hover { box-shadow: var(--nm-shadow-lg); transform: translateY(-2px); } /* ── 15. Cart sidebar ───────────────────────────────────────── */ body[data-theme="neomorphism"] .cart-sidebar { background: var(--nm-surface); border-left: none; box-shadow: -4px 0 30px rgba(0,0,0,.10); } body[data-theme="neomorphism"] .cart-sidebar__head, body[data-theme="neomorphism"] .cart-sidebar__foot { background: var(--nm-surface); } body[data-theme="neomorphism"] .qty-btn { background: var(--nm-bg); border: none; border-radius: 50%; box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .qty-btn:active { box-shadow: var(--nm-pressed); } body[data-theme="neomorphism"] .qty-input { background: var(--nm-bg); border: none; border-radius: var(--nm-r-sm); box-shadow: var(--nm-pressed); } /* ── 16. Footer ─────────────────────────────────────────────── */ body[data-theme="neomorphism"] .site-footer { background: var(--nm-surface); border-top: 1px solid rgba(0,0,0,.05); box-shadow: 0 -2px 16px rgba(0,0,0,.06); } /* ── 17. Newsletter CTA ─────────────────────────────────────── */ body[data-theme="neomorphism"] .newsletter-cta { background: var(--nm-surface); border-top: 1px solid rgba(0,0,0,.04); box-shadow: 0 -1px 10px rgba(0,0,0,.05); } body[data-theme="neomorphism"] .newsletter-cta__input-wrap { background: var(--nm-bg); border: none; border-radius: var(--nm-r-pill); box-shadow: var(--nm-pressed); } /* ── 18. Badges ─────────────────────────────────────────────── */ body[data-theme="neomorphism"] .badge--discount, body[data-theme="neomorphism"] .badge--new { box-shadow: var(--nm-shadow-xs); border: none; } /* ── 19. Dropdown de búsqueda ───────────────────────────────── */ body[data-theme="neomorphism"] .search-drop { background: var(--nm-surface); border: 1px solid rgba(0,0,0,.05); border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-lg); } body[data-theme="neomorphism"] .search-drop__item:hover { background: var(--nm-bg); } /* ── 20. Alertas ────────────────────────────────────────────── */ body[data-theme="neomorphism"] .alert { background: var(--nm-surface); border-radius: var(--nm-r-elem); box-shadow: var(--nm-shadow-sm); } /* ── 21. Página de producto ─────────────────────────────────── */ body[data-theme="neomorphism"] .product-gallery { background: var(--nm-surface); border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow); } body[data-theme="neomorphism"] .thumb-item { background: var(--nm-surface); border: 1px solid rgba(0,0,0,.06); border-radius: var(--nm-r-sm); box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .thumb-item.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(255,154,0,.25); } /* ── 22. Filtros de búsqueda ────────────────────────────────── */ body[data-theme="neomorphism"] .filter-card, body[data-theme="neomorphism"] .search-sidebar { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow-sm); } /* ── 23. Checkout / Carrito ─────────────────────────────────── */ body[data-theme="neomorphism"] .checkout-box, body[data-theme="neomorphism"] .cart-summary { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card); box-shadow: var(--nm-shadow); } /* ── 24. Paginación ─────────────────────────────────────────── */ body[data-theme="neomorphism"] .pagination__btn { background: var(--nm-surface); border: none; border-radius: var(--nm-r-sm); box-shadow: var(--nm-shadow-xs); } body[data-theme="neomorphism"] .pagination__btn.is-active { background: var(--c-primary); box-shadow: none; color: #fff; } body[data-theme="neomorphism"] .pagination__btn:hover:not(.is-active) { box-shadow: var(--nm-shadow-sm); } /* ── 25. Cart tab flotante ──────────────────────────────────── */ body[data-theme="neomorphism"] .cart-tab { background: var(--nm-surface); border: none; border-radius: var(--nm-r-card) 0 0 var(--nm-r-card); box-shadow: -3px 0 12px rgba(0,0,0,.08); } /* ── 26. WhatsApp float ─────────────────────────────────────── */ body[data-theme="neomorphism"] .whatsapp-float { box-shadow: var(--nm-shadow); } /* ── 27. Popup ──────────────────────────────────────────────── */ body[data-theme="neomorphism"] .popup-box { background: var(--nm-surface); border: none; border-radius: 20px; box-shadow: var(--nm-shadow-lg); } /* ── 28. Seasonal tiles ─────────────────────────────────────── */ body[data-theme="neomorphism"] .seasonal-tile { border-radius: var(--nm-r-card); overflow: hidden; box-shadow: var(--nm-shadow-sm); } /* ── 29. Miniatura de la vista previa del selector (admin) ──── */ /* Actualiza la previsualización del tema en /admin/configuracion */ /* ── 30. Buybox CTA — preservar colores de marca ───────────── */ /* La regla genérica de btn--secondary pone fondo blanco, pero */ /* el botón "Comprar ahora" DEBE ser naranja (#FF9A00) siempre. */ body[data-theme="neomorphism"] .pd-buybox__actions .btn--secondary { background: var(--c-primary); color: #fff; border: none; box-shadow: var(--nm-shadow-sm); border-radius: var(--nm-r-pill); } body[data-theme="neomorphism"] .pd-buybox__actions .btn--secondary:hover { background: var(--c-primary-dark); box-shadow: var(--nm-shadow); } body[data-theme="neomorphism"] .pd-buybox__actions .btn--ghost { background: #FFF3E0; color: var(--c-primary); border: 1.5px solid var(--c-primary); box-shadow: none; border-radius: var(--nm-r-pill); } body[data-theme="neomorphism"] .pd-buybox__actions .btn--ghost:hover { background: #FFE0B2; box-shadow: none; }