/* Carrito de compra + selector de sucursal WhatsApp, compartido entre productos.php y details.php: mismo localStorage (clave vn_carrito, ver js/venta-carrito.js). Móvil: barra fija inferior. Desktop: botón flotante. Ambos abren el mismo panel (bottom sheet / lateral). Breakpoint 760px. */ .svc-widget{ --vn-fondo:#f6f8f5; --vn-panel:#ffffff; --vn-tinta:#11221a; --vn-gris:#5f6f66; --vn-linea:#e4eae3; --vn-verde:#009546; --vn-esmeralda:#00713a; --vn-verde-osc:#0a3d23; /* Verde real de WhatsApp (#25D366); --vn-wa-hover es una versión más oscura del mismo verde. */ --vn-wa:#25D366; --vn-wa-hover:#20BA5A; --vn-ease:cubic-bezier(.2,.7,.3,1); font-family:'Poppins',sans-serif; } .svc-widget *{ box-sizing:border-box; } /* Botón flotante desktop: ícono + palabra + contador (nunca ícono solo). Verde esmeralda para distinguirlo del verde WhatsApp de los botones de chat. */ .svc-widget .vn-cart-fab{ position:fixed; right:20px; bottom:20px; z-index:1200; display:flex; align-items:center; gap:10px; min-height:56px; padding:14px 22px; border-radius:999px; border:none; background:var(--vn-esmeralda); color:#fff; font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; box-shadow:0 12px 26px -10px rgba(10,61,35,.6); cursor:pointer; } .svc-widget .vn-cart-fab:hover{ background:var(--vn-verde-osc); } /* --vn-verde-osc en vez de --vn-wa: mejor contraste para el número blanco y mantiene la familia verde-esmeralda del botón. */ .svc-widget .vn-cart-badge{ position:absolute; top:-6px; right:0; min-width:24px; height:24px; padding:0 6px; background:var(--vn-verde-osc); color:#fff; font-size:12px; font-weight:700; border-radius:999px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; } /* Feedback "producto añadido" (ref. NN/g Cart Feedback: confirmación visible e inmediata). El JS re-dispara estas clases con reflow SOLO cuando entra un producto nuevo (ver refreshTotalsUI en venta-carrito.js). transform/opacity: animación en GPU, no toca layout -clave para no janquear en gama de entrada-. */ @keyframes vnFabBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.09); } 60%{ transform:scale(.97); } 100%{ transform:scale(1); } } @keyframes vnBadgePop{ 0%{ transform:scale(.4); opacity:.4; } 55%{ transform:scale(1.35); opacity:1; } 100%{ transform:scale(1); } } .svc-widget .vn-cart-fab--bump{ animation:vnFabBump .42s var(--vn-ease); } .svc-widget .vn-cart-badge--pop{ animation:vnBadgePop .42s var(--vn-ease); } .svc-widget .vn-cart-bar--bump{ animation:vnFabBump .42s var(--vn-ease); } @media (prefers-reduced-motion:reduce){ .svc-widget .vn-cart-fab--bump, .svc-widget .vn-cart-badge--pop, .svc-widget .vn-cart-bar--bump{ animation-duration:.01ms; } } /* Barra móvil fija: fondo sólido esmeralda (nunca transparente) para leerse como elemento fijo de interfaz. Muestra carrito + cantidad + subtotal + botón. */ .svc-widget .vn-cart-bar{ position:fixed; left:0; right:0; bottom:0; z-index:1200; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--vn-esmeralda); color:#fff; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 22px rgba(10,61,35,.28); font-family:'Poppins',sans-serif; } /* Restablece [hidden] porque el display:flex de arriba tendría más especificidad. */ .svc-widget .vn-cart-bar[hidden]{ display:none; } .svc-widget .vn-cart-bar-resumen{ display:flex; align-items:center; gap:12px; min-width:0; } .svc-widget .vn-cart-bar-resumen > i{ font-size:20px; } .svc-widget .vn-cart-bar-datos{ display:flex; flex-direction:column; min-width:0; } .svc-widget .vn-cart-bar-cant{ font-size:12.5px; opacity:.92; } .svc-widget .vn-cart-bar-total{ font-size:16.5px; font-weight:700; line-height:1.2; } .svc-widget .vn-cart-bar-abrir{ flex:0 0 auto; min-height:48px; padding:11px 18px; border:none; border-radius:10px; background:#fff; color:var(--vn-esmeralda); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; } /* El JS agrega esta clase a cuando la barra está visible, para reservarle espacio. */ body.vn-cart-bar-visible{ padding-bottom:84px; } .svc-widget .vn-cart-overlay{ position:fixed; inset:0; background:rgba(17,34,26,.5); opacity:0; visibility:hidden; transition:opacity .2s var(--vn-ease), visibility .2s var(--vn-ease); z-index:1290; } .svc-widget.vn-cart-open .vn-cart-overlay{ opacity:1; visibility:visible; } /* Panel del pedido: lateral derecho en desktop; en móvil se convierte en bottom sheet (ver media query abajo). */ .svc-widget .vn-cart-panel{ position:fixed; top:0; right:0; bottom:0; z-index:1300; width:min(94vw,400px); background:#fff; box-shadow:-14px 0 34px rgba(10,61,35,.25); display:flex; flex-direction:column; padding:18px; transform:translateX(105%); transition:transform .28s var(--vn-ease); } .svc-widget.vn-cart-open .vn-cart-panel{ transform:translateX(0); } .svc-widget .vn-cart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .svc-widget .vn-cart-head h5{ font-size:18px; font-weight:700; margin:0; color:var(--vn-verde-osc); } .svc-widget .vn-cart-close{ min-width:48px; min-height:48px; border:none; background:none; font-size:20px; color:var(--vn-gris); cursor:pointer; } .svc-widget .vn-cart-items{ flex:1; overflow-y:auto; } .svc-widget .vn-cart-empty{ color:var(--vn-gris); font-size:14px; text-align:center; margin-top:24px; } /* Fila en tres líneas para caber con controles grandes en pantallas de 360px: nombre / precios / stepper + Quitar. */ .svc-widget .vn-cart-item{ padding:14px 0; border-bottom:1px solid var(--vn-linea); } .svc-widget .vn-cart-item-name{ font-size:14.5px; font-weight:600; margin:0 0 4px; line-height:1.3; } .svc-widget .vn-cart-item-precios{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px; } .svc-widget .vn-cart-item-price{ font-size:13px; color:var(--vn-gris); } .svc-widget .vn-cart-item-sub{ font-size:14.5px; color:var(--vn-esmeralda); font-weight:700; } .svc-widget .vn-cart-item-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .svc-widget .vn-stepper{ display:flex; align-items:center; gap:6px; } .svc-widget .vn-qty-btn{ width:48px; height:48px; border-radius:9px; border:1px solid var(--vn-linea); background:var(--vn-fondo); color:var(--vn-tinta); font-size:20px; font-weight:700; cursor:pointer; } .svc-widget .vn-qty-btn:hover{ background:var(--vn-linea); } /* "-" deshabilitado en cantidad 1 (ver montarControlCompra en venta-carrito.js): visualmente apagado, sin :hover ni cursor de acción, para que "solo Quitar elimina el producto" se lea de un vistazo. */ .svc-widget .vn-qty-btn:disabled{ opacity:.4; cursor:not-allowed; background:var(--vn-fondo); } /* Contenedor del componente reutilizable "Añadir al carrito" <-> "[Quitar/−][cant][+]" (montarControlCompra en venta-carrito.js; usado en details.php y en el spotlight de inicio). width:100% en ambos estados para que cualquiera de los dos ocupe todo el ancho de su columna, igual que el resto de los CTA de la ficha. */ .svc-widget .vn-buy-control{ display:flex; width:100%; } /* Skin del botón "Añadir al carrito": vive aquí (no en details.css) porque montarControlCompra lo pinta también en el spotlight de index.php, que no carga css/details.css. */ .svc-widget .btn-detail-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:14px 22px; border-radius:14px; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:700; color:#fff; background:var(--vn-esmeralda); transition:transform .14s var(--vn-ease), background-color .14s var(--vn-ease), box-shadow .14s var(--vn-ease); } .svc-widget .btn-detail-primary:hover{ background:var(--vn-verde-osc); transform:translateY(-1px); box-shadow:0 6px 20px -6px rgba(0,113,58,.4); } /* Apple Design: scale instantáneo al presionar — feedback físico sin esperar al release. */ .svc-widget .btn-detail-primary:active{ transform:scale(.97); transition-duration:80ms; } /* Pill de cantidad (ref. Spotlight adaptado): Diseño responsive (48px móvil, 56px desktop). */ .svc-widget .vn-buy-qty{ display:flex; align-items:stretch; width:100%; min-height:48px; border:1.5px solid var(--vn-linea); border-radius:9px; overflow:hidden; background:#fff; transition:border-color .18s var(--vn-ease); } .svc-widget .vn-buy-qty:focus-within{ border-color:var(--vn-verde); } .svc-widget .vn-buy-qty .vn-qty-btn{ flex:0 0 48px; width:48px; height:auto; border:none; border-radius:0; background:none; font-family:inherit; font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .12s var(--vn-ease), color .12s var(--vn-ease), transform .1s ease; } /* Micro-pulse breve al presionar ± */ .svc-widget .vn-buy-qty .vn-qty-btn:active{ transform:scale(.93); transition-duration:60ms; } .svc-widget .vn-buy-qty .vn-qty-btn:focus-visible{ outline:2px solid var(--vn-verde); outline-offset:-2px; } /* Minus / Quitar */ .svc-widget .vn-buy-qty .vn-qty-btn--minus{ color:var(--vn-gris); } .svc-widget .vn-buy-qty .vn-qty-btn--minus:hover{ background:var(--vn-fondo); color:var(--vn-tinta); } .svc-widget .vn-buy-qty .vn-qty-btn--quitar{ color:var(--vn-gris); font-size:16px; } .svc-widget .vn-buy-qty .vn-qty-btn--quitar:hover{ background:#fdf1f0; color:#b3261e; } /* Plus: fondo esmeralda sólido */ .svc-widget .vn-buy-qty .vn-qty-btn--plus{ background:var(--vn-esmeralda); color:#fff; font-size:22px; } .svc-widget .vn-buy-qty .vn-qty-btn--plus:hover{ background:var(--vn-verde-osc); } /* Input central */ .svc-widget .vn-buy-qty .vn-qty-input{ flex:1 1 auto; min-width:64px; height:auto; border:none; border-left:1.5px solid var(--vn-linea); border-right:none; border-radius:0; background:none; font-family:inherit; font-size:16px; font-weight:700; color:var(--vn-tinta); text-align:center; } .svc-widget .vn-buy-qty .vn-qty-input:focus{ outline:none; background:var(--vn-fondo); } .svc-widget .vn-buy-qty .vn-qty-input:focus-visible{ outline:2px solid var(--vn-verde); outline-offset:-2px; } /* Especificaciones Desktop */ @media (min-width:768px){ .svc-widget .vn-buy-qty{ min-height:56px; border-radius:14px; } .svc-widget .vn-buy-qty .vn-qty-btn{ flex:0 0 56px; width:56px; } .svc-widget .vn-buy-qty .vn-qty-input{ font-size:18px; /* flex:1 1 auto hará que crezca hasta donde pueda, o min-width garantiza el 64x56 si no hay espacio */ } } /* Transición corta al reemplazar un estado por el otro (ver reiniciarEntrada en montarControlCompra): solo se dispara en el cambio de estado, no en cada +/-. */ @keyframes vnBuyControlIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } .svc-widget .vn-buy-control--enter{ animation:vnBuyControlIn .2s var(--vn-ease) both; } @media (prefers-reduced-motion:reduce){ .svc-widget .vn-buy-control--enter{ animation-duration:.01ms; } } /* Editable directo (evita tocar "+" repetidamente); 16px de fuente evita el zoom automático de iOS al enfocar. */ .svc-widget .vn-qty-input{ width:64px; height:48px; text-align:center; border:1px solid var(--vn-linea); border-radius:9px; background:#fff; color:var(--vn-tinta); font-family:inherit; font-size:16px; font-weight:700; } .svc-widget .vn-qty-input:focus{ outline:2px solid var(--vn-verde); outline-offset:1px; } /* "Quitar" con ícono + palabra (nunca ícono solo): borrar un producto debe ser tan obvio como bajarle la cantidad. */ .svc-widget .vn-cart-item-remove{ display:inline-flex; align-items:center; gap:7px; min-height:48px; padding:8px 12px; border:none; background:none; border-radius:9px; color:var(--vn-gris); font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; } .svc-widget .vn-cart-item-remove:hover{ color:#b3261e; background:#fdf1f0; } .svc-widget .vn-cart-total{ font-size:16px; font-weight:700; text-align:right; margin:14px 0; } /* Estado "por cotizar": pill de vidrio ámbar tenue (misma familia liquid glass del carrito, en ámbar y no verde/rojo porque es "pendiente de respuesta", no éxito ni error). Se usa en el precio unitario sin precio y en el rótulo del total (ver refreshTotalsUI). */ .svc-widget .vn-price-consultar, .svc-widget .vn-pill-cotizar{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:rgba(224,158,26,.14); -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%); border:1px solid rgba(224,158,26,.32); color:#8a5a00; font-size:12px; font-weight:600; letter-spacing:.01em; white-space:nowrap; } .svc-widget .vn-pill-cotizar{ vertical-align:middle; margin-left:2px; } /* Variante botón de la pill (abre el subcarrito "Por cotizar"): misma cara, affordance de tap. */ .svc-widget .vn-pill-cotizar--btn{ font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s var(--vn-ease), background-color .15s var(--vn-ease); } .svc-widget .vn-pill-cotizar--btn:hover{ background:rgba(224,158,26,.22); } .svc-widget .vn-pill-cotizar--btn:active{ transform:scale(.95); } /* Subcarrito "Por cotizar" (vnCotizarSheet): bottom sheet en móvil, tarjeta centrada en desktop. Encima del panel del carrito (1300) y debajo del Quick-View (1400). */ .svc-widget .vn-cotizar-overlay{ position:fixed; inset:0; background:rgba(17,34,26,.5); z-index:1340; opacity:0; visibility:hidden; transition:opacity .2s var(--vn-ease), visibility .2s var(--vn-ease); } .svc-widget .vn-cotizar-overlay.vn-cotizar-open{ opacity:1; visibility:visible; } .svc-widget .vn-cotizar-sheet{ position:fixed; z-index:1350; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); width:min(94vw,420px); max-height:70vh; overflow-y:auto; background:#fff; border-radius:20px; border:1px solid rgba(10,61,35,.08); box-shadow:0 40px 80px -24px rgba(10,61,35,.35), 0 2px 8px rgba(10,61,35,.08); padding:18px; opacity:0; visibility:hidden; transition:opacity .22s var(--vn-ease), transform .22s cubic-bezier(.32,.72,0,1), visibility .22s var(--vn-ease); } .svc-widget .vn-cotizar-sheet.vn-cotizar-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } .svc-widget .vn-cotizar-nota{ font-size:13px; line-height:1.55; color:var(--vn-gris); margin:0 0 14px; } .svc-widget .vn-cotizar-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--vn-linea); } .svc-widget .vn-cotizar-item:last-child{ border-bottom:0; } .svc-widget .vn-cotizar-item img{ width:48px; height:48px; object-fit:contain; border-radius:10px; background:var(--vn-fondo); border:1px solid var(--vn-linea); flex:0 0 auto; } .svc-widget .vn-cotizar-item-texto{ min-width:0; } .svc-widget .vn-cotizar-item-texto p{ font-size:14px; font-weight:600; margin:0 0 2px; color:var(--vn-tinta); } .svc-widget .vn-cotizar-item-texto span{ font-size:12.5px; color:#8a5a00; font-weight:600; } /* Móvil: el mismo sheet baja al borde inferior como los demás sheets del sitio. */ @media (max-width:759.98px){ .svc-widget .vn-cotizar-sheet{ left:0; right:0; top:auto; bottom:0; width:100%; max-height:65vh; border-radius:20px 20px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); } .svc-widget .vn-cotizar-sheet.vn-cotizar-open{ transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .svc-widget .vn-cotizar-sheet, .svc-widget .vn-cotizar-overlay{ transition-duration:.01ms !important; } .svc-widget .vn-pill-cotizar--btn:active{ transform:none; } } /* Sin soporte de backdrop-filter: ámbar sólido suave, mismo contraste. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .svc-widget .vn-price-consultar, .svc-widget .vn-pill-cotizar{ background:#fbf3e2; } } .svc-widget .vn-checkout-wrap{ position:relative; } .svc-widget .vn-checkout{ width:100%; min-height:58px; border:none; border-radius:12px; cursor:pointer; background:var(--vn-wa); color:#fff; font-family:inherit; font-size:16.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; } .svc-widget .vn-checkout:hover{ background:var(--vn-wa-hover); } .svc-widget .vn-checkout:disabled{ opacity:.5; cursor:not-allowed; } /* Móvil (<760px): oculta el FAB, panel pasa de lateral a bottom sheet. */ @media (max-width:759.98px){ .svc-widget .vn-cart-fab{ display:none; } .svc-widget .vn-cart-panel{ top:auto; left:0; right:0; bottom:0; width:100%; max-height:82vh; border-radius:18px 18px 0 0; box-shadow:0 -14px 34px rgba(10,61,35,.25); transform:translateY(105%); } .svc-widget.vn-cart-open .vn-cart-panel{ transform:translateY(0); } } /* Desktop (>=760px): la barra móvil no aplica (y tampoco su reserva de espacio en body). */ @media (min-width:760px){ .svc-widget .vn-cart-bar{ display:none; } body.vn-cart-bar-visible{ padding-bottom:0; } } /* Dropdown de selección de sede: se ancla arriba del botón porque sus 3 usos viven cerca del borde inferior de su contenedor. */ .svc-menu-wrap{ position:relative; } .svc-menu{ position:absolute; bottom:calc(100% + 8px); left:0; right:0; z-index:1310; background:var(--vn-panel); border:1px solid var(--vn-linea); border-radius:10px; box-shadow:0 14px 28px -12px rgba(10,61,35,.35); padding:6px; max-height:230px; overflow-y:auto; } .svc-menu button{ display:block; width:100%; text-align:left; min-height:44px; padding:8px 10px; border:none; background:none; border-radius:7px; font-family:inherit; font-size:13px; font-weight:600; color:var(--vn-tinta); cursor:pointer; } .svc-menu button:hover, .svc-menu button:focus-visible{ background:var(--vn-fondo); } .svc-widget button:focus-visible{ outline:2px solid var(--vn-verde); outline-offset:2px; } /* Miniatura + datos por fila (ver renderCart en js/venta-carrito.js); el botón abre el Quick-View en vez de navegar, para no perder el carrito abierto de fondo. */ .svc-widget .vn-cart-item-row{ display:flex; gap:12px; align-items:flex-start; } .svc-widget .vn-cart-item-thumb-btn{ flex:0 0 auto; width:60px; height:60px; padding:0; border:1px solid var(--vn-linea); border-radius:9px; background:#fff; cursor:pointer; overflow:hidden; } .svc-widget .vn-cart-item-thumb-btn:hover{ border-color:var(--vn-esmeralda); } .svc-widget .vn-cart-item-thumb{ width:100%; height:100%; object-fit:contain; display:block; } .svc-widget .vn-cart-item-main{ flex:1; min-width:0; } /* Quick-View (ver clases/quickview.php): overlay/modal propios, no reutilizan vn-cart-overlay/vn-cart-panel, para abrirse encima del carrito sin cerrarlo. */ .svc-widget .vn-qv-overlay{ position:fixed; inset:0; background:rgba(17,34,26,.6); z-index:1400; opacity:0; visibility:hidden; transition:opacity .2s var(--vn-ease), visibility .2s var(--vn-ease); } .svc-widget .vn-qv-overlay.vn-qv-open{ opacity:1; visibility:visible; } /* Rediseño conciso (pedido del cliente, ref. Apple): una sola foto + nombre + precio + descripción recortada + CTA "Ver ficha completa". Sombra en capas (difusa + contacto) y hairline en vez de una sola sombra dura: profundidad sin peso visual. */ .svc-widget .vn-qv-modal{ position:fixed; z-index:1410; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); width:min(94vw,560px); max-height:88vh; overflow-y:auto; background:#fff; border-radius:22px; border:1px solid rgba(10,61,35,.08); box-shadow:0 40px 80px -24px rgba(10,61,35,.35), 0 2px 8px rgba(10,61,35,.08); padding:20px; opacity:0; visibility:hidden; transition:opacity .24s var(--vn-ease), transform .24s cubic-bezier(.32,.72,0,1), visibility .24s var(--vn-ease); } .svc-widget .vn-qv-modal.vn-qv-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } .svc-widget .vn-qv-close{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:999px; border:none; background:var(--vn-fondo); color:var(--vn-tinta); font-size:16px; cursor:pointer; } .svc-widget .vn-qv-close:hover{ background:var(--vn-linea); } .svc-widget .vn-qv-loading{ padding:60px 20px; text-align:center; color:var(--vn-gris); font-weight:600; } .svc-widget .vn-qv-loading[hidden]{ display:none; } .svc-widget .vn-qv-body[hidden]{ display:none; } .svc-widget .vn-qv-body{ display:flex; flex-direction:column; gap:18px; margin-top:8px; } .svc-widget .vn-qv-carousel{ position:relative; } /* Cuadrado fijo + object-fit:contain, mismo criterio que .fc-media / #carouselImages .carousel-item. */ .svc-widget .vn-qv-media{ aspect-ratio:1/1; background:var(--vn-fondo); border:1px solid var(--vn-linea); border-radius:12px; overflow:hidden; padding:14px; display:flex; align-items:center; justify-content:center; } .svc-widget .vn-qv-media img{ width:100%; height:100%; object-fit:contain; } .svc-widget .vn-qv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid var(--vn-linea); background:rgba(255,255,255,.9); color:var(--vn-verde-osc); display:flex; align-items:center; justify-content:center; cursor:pointer; } .svc-widget .vn-qv-nav[hidden]{ display:none; } .svc-widget .vn-qv-nav-prev{ left:8px; } .svc-widget .vn-qv-nav-next{ right:8px; } .svc-widget .vn-qv-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; } .svc-widget .vn-qv-dots[hidden]{ display:none; } .svc-widget .vn-qv-dot{ width:8px; height:8px; border-radius:50%; background:var(--vn-linea); border:none; padding:0; cursor:pointer; } .svc-widget .vn-qv-dot.vn-qv-dot--activo{ background:var(--vn-esmeralda); } .svc-widget .vn-qv-title{ font-size:20px; font-weight:700; color:var(--vn-verde-osc); margin:0 0 6px; } /* Mismo tratamiento visual que .detail-price (details.css) y .fc-price-ticket (index.php). */ /* Sin caja/gradiente (mismo criterio que .detail-price en details.css, ver DESIGN.md "Don't envolver el precio... en una caja con fondo de gradiente verde"): la jerarquía la da el tamaño/peso frente al precio tachado, no un contenedor. */ .svc-widget .vn-qv-price{ display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:22px; font-weight:700; color:var(--vn-esmeralda); margin-bottom:8px; } .svc-widget .vn-qv-price .vn-qv-price-old{ font-size:14px; font-weight:600; color:var(--vn-gris); text-decoration:line-through; } /* Mismo refuerzo visual que .precio-descuento-badge (details.css) y .fc-price-flag (index.php). */ .svc-widget .vn-qv-price-discount-badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; color:#fff; background:var(--vn-verde); border-radius:999px; padding:2px 8px; letter-spacing:.02em; } /* Recortada a 4 líneas: el vistazo responde "¿este era?"; leerlo todo es tarea de la ficha. */ .svc-widget .vn-qv-desc{ font-size:14.5px; line-height:1.6; color:#333; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .svc-widget .vn-qv-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .svc-widget .vn-qv-more-btn{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 4px; border:none; background:none; color:var(--vn-esmeralda); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; } .svc-widget .vn-qv-more-btn[hidden]{ display:none; } .svc-widget .vn-qv-more-btn:hover{ text-decoration:underline; } /* CTA principal del modal: pill llena de marca (antes era un enlace suelto que competía con nada). Es la única salida real del vistazo, merece jerarquía de botón. */ .svc-widget .vn-qv-full-link{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; width:100%; border-radius:999px; background:var(--vn-esmeralda); color:#fff; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 8px 20px -8px rgba(0,113,58,.5); transition:transform .15s var(--vn-ease), box-shadow .15s var(--vn-ease), background-color .15s var(--vn-ease); } .svc-widget .vn-qv-full-link:hover{ background:var(--vn-verde-osc); text-decoration:none; } /* Respuesta táctil tipo Apple: todo lo interactivo del modal se "hunde" al presionar (también con el dedo dejado pisado en el celular), sin flash gris de iOS. */ .svc-widget .vn-qv-full-link, .svc-widget .vn-qv-close, .svc-widget .vn-qv-nav, .svc-widget .vn-qv-dot{ -webkit-tap-highlight-color:transparent; } .svc-widget .vn-qv-close, .svc-widget .vn-qv-nav{ transition:transform .15s var(--vn-ease), background-color .15s var(--vn-ease); } .svc-widget .vn-qv-full-link:active{ transform:scale(.96); box-shadow:0 4px 12px -6px rgba(0,113,58,.5); } .svc-widget .vn-qv-close:active, .svc-widget .vn-qv-nav:active{ transform:scale(.92); } .svc-widget .vn-qv-nav:active{ transform:translateY(-50%) scale(.92); } @media (prefers-reduced-motion:reduce){ .svc-widget .vn-qv-full-link, .svc-widget .vn-qv-close, .svc-widget .vn-qv-nav{ transition:none; } .svc-widget .vn-qv-full-link:active, .svc-widget .vn-qv-close:active, .svc-widget .vn-qv-nav:active{ transform:none; } .svc-widget .vn-qv-nav:active{ transform:translateY(-50%); } } .svc-widget .vn-qv-extra{ margin-top:16px; padding-top:16px; border-top:1px solid var(--vn-linea); } .svc-widget .vn-qv-extra[hidden]{ display:none; } .svc-widget .vn-qv-extra-section{ margin-bottom:16px; } .svc-widget .vn-qv-extra-section:last-child{ margin-bottom:0; } .svc-widget .vn-qv-extra-section h6{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--vn-gris); margin:0 0 8px; } .svc-widget .vn-qv-extra-section p{ font-size:14px; line-height:1.6; color:#333; margin:0; } .svc-widget .vn-qv-extra-section ul{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.7; color:#333; } /* >=640px: carrusel a la izquierda, info a la derecha (mismo quiebre que usa .fc-tag-card del spotlight en productos.php para pasar de apilado a lado-a-lado). */ @media (min-width:640px){ .svc-widget .vn-qv-body{ flex-direction:row; align-items:flex-start; } .svc-widget .vn-qv-carousel{ flex:0 0 46%; max-width:320px; } .svc-widget .vn-qv-info{ flex:1; min-width:0; } } @media (prefers-reduced-motion:reduce){ .svc-widget .vn-cart-panel{ transition-duration:.01ms !important; } .svc-widget .vn-qv-modal, .svc-widget .vn-qv-overlay{ transition-duration:.01ms !important; } } /* Badge de cantidad por producto (ver actualizarIndicadoresCantidad() en venta-carrito.js, crea/actualiza dentro de cualquier [data-product-id]). Solo ícono + número; el texto completo va en el aria-label para lectores de pantalla. tabular-nums evita que el ancho baile entre 9 y 10. */ .svc-cart-qty-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; color:var(--vn-verde-osc,#0a3d23); line-height:1.2; white-space:nowrap; background:linear-gradient(135deg, rgba(0,149,70,.13), rgba(0,113,58,.05)); border:1.5px solid rgba(0,113,58,.26); border-radius:999px; padding:7px 14px 7px 8px; font-variant-numeric:tabular-nums; transform-origin:left center; } .svc-cart-qty-badge__icono{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:24px; height:24px; border-radius:50%; font-size:11px; background:var(--vn-esmeralda,#00713a); color:#fff; } /* Variante "corner": badge individual por tarjeta (catálogo, riel de destacados). Oculto a pedido -no confundir con .vn-cart-fab/.vn-cart-badge, el botón flotante "Ver carrito" y su contador, que son clases distintas y siguen intactos-. JS sigue creando el elemento (actualizarIndicadoresCantidad en venta-carrito.js) por si se reactiva más adelante; con display:none no ocupa espacio ni se ve. */ .svc-cart-qty-badge--corner{ display:none; } /* "pop" al aparecer, "bump" al cambiar cantidad (JS re-dispara la clase con reflow, ver reiniciarAnimacionBadge). transform-origin por variante define desde dónde crece. */ @keyframes svcBadgePop{ 0%{ opacity:0; transform:scale(.5); } 60%{ opacity:1; transform:scale(1.12); } 100%{ opacity:1; transform:scale(1); } } @keyframes svcBadgeBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } } .svc-cart-qty-badge--pop{ animation:svcBadgePop .32s var(--vn-ease,cubic-bezier(.2,.7,.3,1)) both; } .svc-cart-qty-badge--bump{ animation:svcBadgeBump .3s var(--vn-ease,cubic-bezier(.2,.7,.3,1)) both; } @media (prefers-reduced-motion:reduce){ .svc-cart-qty-badge--pop, .svc-cart-qty-badge--bump{ animation-duration:.01ms; } }