/* ======================================== MUYUNICOS - Global UI Components Consolidated: Share Button, WPLingua Switcher, WhatsApp Button, Search Form, Carousel ======================================== */ /* --- WPLingua Switcher — Ocultar en subdominios sin múltiples idiomas --- */ /* override GP: WPLingua inyecta .wplng-switcher globalmente; solo es útil en us.muyunicos.com y br.muyunicos.com. La clase .mu-wplng-hide es inyectada en por inc/ui.php → mu_wplng_body_class() vía add_filter('body_class'). Este bloque actúa como fallback visual antes de que la clase esté disponible en los subdominios no multilingüe. */ body.mu-wplng-hide .wplng-switcher { display: none !important; } /* ============================================ WPLINGUA SWITCHER UI (Toggle + Restore Tab) ============================================ */ .wplng-close-btn { background-color: var(--blanco, #fff); color: var(--texto, #1d2327); border: none; border-radius: 9px; margin: 0; width: 30px; height: 30px; padding: 0px 0px; display: inline-block; cursor: pointer; font-size: 16px; font-weight: bold; vertical-align: text-bottom; } .wplng-close-btn:hover { background-color: #f0f0f1; } .wplng-switcher.wplng-collapsed { opacity: 0; pointer-events: none; transform: translateY(20px); transition: all 0.3s; } .wplng-switcher.theme-light-simple-smooth .switcher-content { border: 0; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .wplng-restore-tab { position: fixed; bottom: 0; right: 18px; background-color: var(--blanco, #fff); box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; border-radius: 9px 9px 0 0; padding: 4px 10px 4px 10px; cursor: pointer; min-width: 50px; min-height: 28px; z-index: 10500; display: flex; align-items: center; justify-content: center; } .wplng-restore-tab span { font-size: 20px; line-height: 20px; } .wplng-restore-tab span img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } .wplng-restore-tab:hover { background: #f0f0f1; } /* ============================================ WHATSAPP FLOATING BUTTON ============================================ */ .boton-whatsapp { position: fixed; width: 50px; height: 50px; bottom: 82px; right: 25px; background-color: #25d366; color: var(--blanco, #FFF); border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 0px 0px #339db7; z-index: 100; } .boton-whatsapp img { width: 100%; } /* ============================================ SEARCH FORM (WooCommerce Product Search) ============================================ */ .mu-search-group { display: flex; width: 100%; position: relative; align-items: center; } .mu-product-search .search-field { width: 100%; height: 40px; padding: 0 15px; padding-right: 50px; border: 1px solid transparent; border-radius: 4px; background-color: var(--blanco, #ffffff); color: var(--primario, #111111); font-size: 14px; box-shadow: none; outline: none; } .mu-product-search .mu-search-submit { position: absolute; right: 0; top: 0; bottom: 0; width: 45px; height: 40px; background-color: var(--secundario, #FFD77A); color: var(--primario, #111111); border: none; border-radius: 0 4px 4px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 0.2s ease; line-height: 0; } .mu-product-search .mu-search-submit:hover { background-color: #ffe099; color: #000; } .mu-product-search .mu-search-submit svg { width: 18px; height: 18px; stroke-width: 2.5px; fill: none; stroke: currentColor; } /* ============================================ SISTEMA DE CARRUSEL HÍBRIDO GLOBAL ============================================ */ .mu-carousel-wrapper { position: relative; max-width: 100%; margin: 0 auto; } /* --- ESTADO DESKTOP (>968px): Grilla Estática --- */ .mu-carousel-track { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */ gap: 20px; width: 100%; padding: 10px 0 20px 0; } /* Items del carrusel */ .mu-carousel-item { user-select: none; /* Mejor experiencia para el drag futuro */ } /* Botones Navegación (Ocultos en Desktop) */ .mu-nav-btn { display: none; position: absolute; top: 40%; width: 40px; height: 40px; border-radius: 50%; background: var(--primario, #ff5e57); border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 20; cursor: pointer; align-items: center; justify-content: center; transition: transform 0.2s ease; } .mu-nav-btn:active { transform: translateY(-50%) scale(0.95); } .mu-nav-btn.prev { left: -10px; } .mu-nav-btn.next { right: -10px; } /* --- MODO CARRUSEL (Tablets y Móviles <= 968px) --- */ @media (max-width: 968px) { .mu-carousel-track { display: flex; /* Cambia Grid a Flex */ overflow-x: auto; /* Habilita scroll horizontal */ scroll-snap-type: x mandatory; /* Efecto magnético */ scroll-behavior: smooth; padding-bottom: 40px; /* Espacio para scroll/sombras */ /* Ocultar barra de scroll nativa */ scrollbar-width: none; -ms-overflow-style: none; } .mu-carousel-track::-webkit-scrollbar { display: none; } /* Ajuste de Items para Carrusel */ .mu-carousel-item { flex: 0 0 auto; width: 260px; /* Ancho fijo para ver parcialmente el siguiente */ scroll-snap-align: center; } /* Mostrar botones */ .mu-nav-btn { display: flex; } } /* --- MODO MÓVIL PEQUEÑO (< 480px) --- */ @media (max-width: 480px) { .mu-carousel-track { gap: 15px; } /* Item ocupa todo el ancho */ .mu-carousel-item { width: 100%; margin-right: 0; } /* Botones más discretos */ .mu-nav-btn { width: 32px; height: 32px; } } /* ============================================ SHARE BUTTON (Native + Fallback) ============================================ */ .mu-share-btn, .dcms-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; background-color: transparent; color: var(--primario, #2367a7); border: none; padding: 6px; cursor: pointer; border-radius: var(--mu-radius-full, 9999px); /* override GP: full pill — evita hardcode 999px */ transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; line-height: 0; vertical-align: middle; } .mu-share-btn:hover, .dcms-share-btn:hover { transform: scale(1.12); background-color: transparent; } .mu-share-btn:focus-visible, .dcms-share-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mu-share-btn, .dcms-share-btn { transition: none; } .mu-share-btn:hover, .dcms-share-btn:hover { transform: none; } } .dcms-share-icon { display: inline-flex; align-items: center; justify-content: center; } .dcms-share-icon svg { display: block; } /* Estado copiado */ .dcms-share-btn.is-copied { background-color: color-mix(in srgb, currentColor 10%, transparent); color: var(--mu-success, #27ae60); } .dcms-share-btn .dcms-share-icon--check { display: none; } .dcms-share-btn.is-copied .dcms-share-icon--share { display: none; } .dcms-share-btn.is-copied .dcms-share-icon--check { display: inline-flex; } /* Tooltip "Enlace copiado" */ .dcms-share-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #333; color: var(--blanco, #fff); padding: 5px 10px; border-radius: var(--mu-radius-sm, 6px); /* override GP: tooltip compacto — evita hardcode 8px */ font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; animation: dcmsFadeIn 0.3s forwards; z-index: 999; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .dcms-share-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } @keyframes dcmsFadeIn { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 768px) { .dcms-share-tooltip { font-size: 11px; } }