/* Theme Name: Electro Child Theme URI: https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624 Description: Tema hijo oficial de Terian B2Tech con estandares corporativos modernos. Author: Terian Integradores de Tecnologia Template: electro Version: 3.4.4 */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarala:wght@400;700&display=swap'); /* ========================================================================== 1. VARIABLES & REGLAS BASE ========================================================================== */ :root { --terian-primary: #00759e; --terian-primary-hover: #0090c2; --terian-dark: #0f172a; --terian-dark-alt: #1e293b; --terian-text-muted: #475569; --terian-border: #e2e8f0; --terian-bg-cold: #f8fafc; --terian-radius: 16px; --terian-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); --terian-shadow-hover: 0 12px 30px rgba(0, 117, 158, 0.12); } body, p, input, select, textarea, .woocommerce { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #475569; } h1, h2, h3, h4, h5, h6, .site-header .navbar-nav, .btn, .button, .nav-link { font-family: 'Sarala', sans-serif !important; } /* ========================================================================== 2. HEADER & NAVEGACIÓN MODERNA ========================================================================== */ .site-header.header-v10 { background: #ffffff !important; border-bottom: 1px solid var(--terian-border) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } .site-header .navbar-nav > li > a { font-weight: 700 !important; font-size: 15px !important; color: #1e293b !important; padding: 12px 16px !important; transition: color 0.2s ease; } .site-header .navbar-nav > li > a:hover { color: var(--terian-primary) !important; } .site-header .departments-menu-v2-title, .site-header .departments-menu-title { background: var(--terian-primary) !important; border-radius: 8px 8px 0 0 !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; } .navbar-search .input-group .btn { background-color: var(--terian-primary) !important; border-color: var(--terian-primary) !important; color: #ffffff !important; } /* ========================================================================== 3. HERO PRINCIPAL B2B PANORÁMICO ========================================================================== */ .terian-hero-section { padding: 10px 0 20px 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .terian-hero-card { background: linear-gradient(135deg, #071927 0%, #00364d 60%, #00759e 100%); border-radius: 24px; padding: 56px 48px; color: #ffffff; box-shadow: 0 16px 40px rgba(0, 117, 158, 0.16); position: relative; overflow: hidden; } .terian-hero-card::after { content: ""; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 168, 224, 0.18) 0%, transparent 70%); pointer-events: none; } .terian-badge { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); color: #38bdf8; font-family: 'Inter', sans-serif !important; font-weight: 600; font-size: 13px; letter-spacing: 0.8px; padding: 6px 16px; border-radius: 50px; margin-bottom: 20px; } .badge-dot { width: 8px; height: 8px; background: #38bdf8; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 10px #38bdf8; } .terian-hero-title { font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 38px !important; line-height: 1.25 !important; color: #ffffff !important; margin-bottom: 18px !important; } .terian-hero-description { font-family: 'Inter', sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; color: #cbd5e1 !important; margin-bottom: 32px !important; max-width: 580px; } .terian-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .btn.terian-btn-primary { background: #0090c2 !important; color: #ffffff !important; border: none !important; padding: 14px 28px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 12px !important; box-shadow: 0 6px 20px rgba(0, 144, 194, 0.4) !important; transition: all 0.25s ease !important; display: inline-flex; align-items: center; } .btn.terian-btn-primary:hover { background: #00a8e0 !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 144, 194, 0.5) !important; color: #ffffff !important; } .btn.terian-btn-outline { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 12px !important; transition: all 0.25s ease !important; display: inline-flex; align-items: center; } .btn.terian-btn-outline:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; border-color: #ffffff !important; } /* Stats card on hero right */ .terian-stats-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 32px 28px; } .stat-item { padding: 8px 0; } .stat-number { font-family: 'Sarala', sans-serif; font-weight: 700; font-size: 32px; color: #38bdf8; line-height: 1.1; margin-bottom: 4px; } .stat-label { font-size: 14px; color: #e2e8f0; line-height: 1.4; } .stat-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 16px 0; } /* ========================================================================== 4. PILARES / BENEFICIOS ========================================================================== */ .terian-pillars-section { padding: 24px 0 36px 0; } .pillar-box { background: #ffffff; border: 1px solid var(--terian-border); border-radius: var(--terian-radius); padding: 22px 24px; display: flex; align-items: center; gap: 18px; box-shadow: var(--terian-shadow); transition: all 0.25s ease; } .pillar-box:hover { transform: translateY(-3px); box-shadow: var(--terian-shadow-hover); border-color: #cbd5e1; } .pillar-icon { width: 48px; height: 48px; background: rgba(0, 117, 158, 0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pillar-content h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin: 0 0 4px 0 !important; } .pillar-content p { font-size: 13px !important; margin: 0 !important; color: var(--terian-text-muted); line-height: 1.45; } /* ========================================================================== 5. BENTO GRID DE MARCAS LÍDERES ========================================================================== */ .terian-brands-section { padding: 36px 0 48px 0; background: #f8fafc; } .section-tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--terian-primary); text-transform: uppercase; display: block; margin-bottom: 6px; } .section-title { font-family: 'Sarala', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin-bottom: 8px !important; } .section-subtitle { font-size: 15px; color: var(--terian-text-muted); max-width: 640px; margin: 0 auto; } .terian-brand-card { background: #ffffff; border: 1px solid var(--terian-border); border-radius: var(--terian-radius); padding: 28px 24px; display: flex; flex-direction: column; height: 100%; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--terian-shadow); position: relative; overflow: hidden; } .terian-brand-card:hover { transform: translateY(-4px); border-color: var(--terian-primary); box-shadow: var(--terian-shadow-hover); } .brand-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .brand-pill { background: rgba(0, 117, 158, 0.08); color: var(--terian-primary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; } .brand-pill-gold { background: #fef3c7; color: #b45309; } .brand-count { font-size: 12px; color: #94a3b8; font-weight: 500; } .brand-name { font-size: 20px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin-bottom: 8px !important; } .brand-desc { font-size: 13.5px; color: var(--terian-text-muted); line-height: 1.55; margin-bottom: 18px; flex-grow: 1; } .brand-link { font-family: 'Sarala', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--terian-primary); transition: color 0.2s ease; } .terian-brand-card:hover .brand-link { color: var(--terian-primary-hover); } .terian-brand-card-all { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-style: dashed; } /* ========================================================================== 6. PRODUCTOS DESTACADOS WOOCOMMERCE & SEPARACIÓN DE TARJETAS ========================================================================== */ .terian-products-section { padding: 48px 0; background: #f8fafc; } /* Contenedor Grid con Separación Real entre Columnas */ .terian-products-grid ul.products.row, ul.products.row { margin-left: -10px !important; margin-right: -10px !important; row-gap: 22px !important; } /* Elemento Columna (li.product) */ .terian-products-grid ul.products li.product, ul.products > li.product, .owl-item > .product { padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 0 !important; border: none !important; background: transparent !important; box-sizing: border-box !important; } /* Tarjeta de Producto Independiente (.product-outer) */ .terian-products-grid ul.products li.product .product-outer, ul.products > li.product .product-outer, .owl-item > .product .product-outer { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 18px 16px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; height: 100% !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; overflow: hidden !important; position: relative !important; } /* Efecto Hover en Tarjeta Elevada */ .terian-products-grid ul.products li.product .product-outer:hover, ul.products > li.product .product-outer:hover, .owl-item > .product .product-outer:hover { border-color: #00759e !important; box-shadow: 0 12px 28px rgba(0, 117, 158, 0.12) !important; transform: translateY(-4px) !important; } .terian-products-grid .product-inner, ul.products > li.product .product-inner, .owl-item > .product .product-inner { border: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; } /* Categoría de Producto */ .loop-product-categories { display: block !important; margin-bottom: 4px !important; } .loop-product-categories a { font-size: 0.78rem !important; font-weight: 600 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; text-decoration: none !important; } .loop-product-categories a:hover { color: #00759e !important; } /* Título de Producto Homologado a 2 Líneas */ .terian-products-grid .woocommerce-loop-product__title, ul.products .woocommerce-loop-product__title { font-family: 'Sarala', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.35 !important; margin-bottom: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; height: 38px !important; text-decoration: none !important; } .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title { color: #00759e !important; } /* Miniatura del Producto Centrada */ .product-thumbnail.product-item__thumbnail { display: flex !important; align-items: center !important; justify-content: center !important; height: 150px !important; margin: 8px 0 14px 0 !important; } .product-thumbnail.product-item__thumbnail img { max-height: 140px !important; width: auto !important; object-fit: contain !important; transition: transform 0.28s ease !important; } .product-outer:hover .product-thumbnail.product-item__thumbnail img { transform: scale(1.06) !important; } /* Footer de la Tarjeta Alineado Abajo */ .product-loop-footer { margin-top: auto !important; padding-top: 10px !important; border-top: 1px solid #f1f5f9 !important; } /* Disponibilidad / Inventario */ .product-loop-footer .availability { font-size: 0.82rem !important; color: #64748b !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .product-loop-footer .availability .stock { display: inline !important; font-weight: 600 !important; color: #16a34a !important; margin: 0 !important; } /* Fila de Precio y Botón de Carrito */ .price-add-to-cart { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 8px !important; margin-bottom: 6px !important; height: auto !important; min-height: 42px !important; } /* Precio en Tarjeta */ .price-add-to-cart .price, .terian-products-grid .price { font-family: 'Sarala', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #00759e !important; line-height: 1.2 !important; margin: 0 !important; display: inline-block !important; } .price-add-to-cart .price ins { text-decoration: none !important; } .price-add-to-cart .price del { font-size: 0.82rem !important; color: #94a3b8 !important; margin-right: 4px !important; } /* Contenedor del Botón de Carrito */ .price-add-to-cart .add-to-cart-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin: 0 !important; position: relative !important; } /* ========================================================================== DISEÑO MODERNO DEL BOTÓN AGREGAR AL CARRITO (TERIAN B2B) ========================================================================== */ .price-add-to-cart .add-to-cart-wrap a.button, .price-add-to-cart .add-to-cart-wrap .button, .terian-products-grid .button.add_to_cart_button, .products > .product .add-to-cart-wrap .button, .owl-item > .product .add-to-cart-wrap .button, .add-to-cart-wrap .button { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; border-radius: 50% !important; background: #00759e !important; border: none !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; text-indent: -9999px !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 117, 158, 0.28) !important; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; float: none !important; } /* Hover del Botón */ .price-add-to-cart .add-to-cart-wrap a.button:hover, .price-add-to-cart .add-to-cart-wrap .button:hover, .terian-products-grid .button.add_to_cart_button:hover, .products > .product .add-to-cart-wrap .button:hover, .owl-item > .product .add-to-cart-wrap .button:hover, .add-to-cart-wrap .button:hover { background: #0090c2 !important; transform: translateY(-2px) scale(1.08) !important; box-shadow: 0 6px 16px rgba(0, 117, 158, 0.42) !important; } /* Ícono de Carrito Blanco Nítido (Erradica el fondo gris y el desfase) */ .price-add-to-cart .add-to-cart-wrap a.button::before, .price-add-to-cart .add-to-cart-wrap .button::before, .terian-products-grid .button.add_to_cart_button::before, .products > .product .add-to-cart-wrap .button::before, .owl-item > .product .add-to-cart-wrap .button::before, .add-to-cart-wrap .button::before { content: "\f217" !important; /* FontAwesome cart icon */ font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important; font-weight: 900 !important; font-size: 15px !important; color: #ffffff !important; background: transparent !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; text-indent: 0 !important; float: none !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; height: auto !important; } /* Estado Añadido (Palomita Verde de Éxito) */ .price-add-to-cart .add-to-cart-wrap .added_to_cart, .products > .product .add-to-cart-wrap .added_to_cart, .owl-item > .product .add-to-cart-wrap .added_to_cart, .add-to-cart-wrap .added_to_cart { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 50% !important; background: #16a34a !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-indent: -9999px !important; position: relative !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important; float: none !important; margin-left: 6px !important; } .price-add-to-cart .add-to-cart-wrap .added_to_cart::before, .products > .product .add-to-cart-wrap .added_to_cart::before, .owl-item > .product .add-to-cart-wrap .added_to_cart::before, .add-to-cart-wrap .added_to_cart::before { content: "\f00c" !important; font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important; font-weight: 900 !important; font-size: 15px !important; color: #ffffff !important; background: transparent !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; text-indent: 0 !important; float: none !important; } /* Enlace de Guardar en Proyecto (Wishlist) */ .yith-wcwl-add-to-wishlist { margin-top: 8px !important; } .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.82rem !important; color: #00759e !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a:hover { color: #0090c2 !important; } .yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg { width: 15px !important; height: 15px !important; color: #00759e !important; } /* ========================================================================== 7. CALL TO ACTION (CTA) AL PIE ========================================================================== */ .terian-cta-section { padding: 10px 0 60px 0; background: #ffffff; } .terian-cta-banner { background: linear-gradient(135deg, #071927 0%, #00364d 55%, #00759e 100%); border-radius: 24px; padding: 48px 44px; color: #ffffff; box-shadow: 0 16px 40px rgba(0, 117, 158, 0.14); } .cta-tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #38bdf8; text-transform: uppercase; display: block; margin-bottom: 8px; } .cta-title { font-family: 'Sarala', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 12px !important; line-height: 1.3 !important; } .cta-desc { font-size: 15px; color: #cbd5e1; line-height: 1.6; margin: 0; max-width: 680px; } .btn.terian-btn-white { background: #ffffff !important; color: var(--terian-dark) !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px 28px !important; border-radius: 12px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; transition: all 0.25s ease !important; text-decoration: none !important; display: inline-block; } .btn.terian-btn-white:hover { background: #f1f5f9 !important; color: var(--terian-primary) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important; } /* ========================================================================== 8. RESPONSIVE ========================================================================== */ @media (max-width: 991px) { .terian-hero-card { padding: 40px 28px; } .terian-hero-title { font-size: 30px !important; } .terian-hero-feature-col { margin-top: 32px; } .terian-cta-banner { padding: 36px 24px; } } /* ========================================================================== 9. COMPARADOR TÉCNICO B2B & LISTA DE PROYECTOS (FASE B) ========================================================================== */ /* Botones de acción en ficha de producto y loops */ .action-buttons { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; align-items: center !important; margin: 18px 0 !important; } .action-buttons .yith-wcwl-add-to-wishlist, .action-buttons .add-to-compare-link { margin: 0 !important; } .action-buttons a, .add-to-compare-link, .yith-wcwl-add-button a, .yith-wcwl-wishlistaddedbrowse a, .yith-wcwl-wishlistexistsbrowse a { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--terian-primary) !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .action-buttons a:hover, .add-to-compare-link:hover, .yith-wcwl-add-button a:hover { color: var(--terian-primary-hover) !important; transform: translateY(-1px); } .action-buttons svg, .action-buttons i { width: 17px !important; height: 17px !important; font-size: 16px !important; color: var(--terian-primary) !important; } /* Tabla de Comparación Técnica B2B */ .table-responsive .table-compare { background: #ffffff !important; border: 1px solid var(--terian-border) !important; border-radius: 14px !important; box-shadow: var(--terian-shadow) !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; } .table-compare th { background: #f8fafc !important; color: var(--terian-dark) !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 16px 20px !important; border-bottom: 1px solid var(--terian-border) !important; border-right: 1px solid var(--terian-border) !important; width: 180px !important; vertical-align: middle !important; } .table-compare td { padding: 18px 22px !important; border-bottom: 1px solid var(--terian-border) !important; border-right: 1px solid var(--terian-border) !important; vertical-align: top !important; font-size: 14px !important; color: #334155 !important; line-height: 1.55 !important; } .table-compare .product-title { font-family: 'Sarala', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin-top: 12px !important; } .table-compare .product-price { font-size: 16px !important; font-weight: 700 !important; color: var(--terian-primary) !important; } .table-compare .remove-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #fee2e2 !important; color: #dc2626 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .table-compare .remove-icon:hover { background: #dc2626 !important; color: #ffffff !important; } /* Estado de comparador vacío */ .compare-empty { padding: 60px 20px !important; text-align: center !important; background: #f8fafc !important; border: 1px dashed var(--terian-border) !important; border-radius: 16px !important; margin: 30px 0 !important; } .compare-empty .cart-empty { font-family: 'Sarala', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin-bottom: 20px !important; } .compare-empty .return-to-shop .btn { background: var(--terian-primary) !important; color: #ffffff !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; padding: 12px 28px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 117, 158, 0.25) !important; transition: all 0.2s ease !important; } .compare-empty .return-to-shop .btn:hover { background: var(--terian-primary-hover) !important; transform: translateY(-2px); } /* Tabla de Lista de Proyectos / Wishlist */ .wishlist_table { border: 1px solid var(--terian-border) !important; border-radius: 14px !important; box-shadow: var(--terian-shadow) !important; overflow: hidden !important; } .wishlist_table th { background: #f8fafc !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 13.5px !important; color: var(--terian-dark) !important; text-transform: uppercase !important; border-bottom: 1px solid var(--terian-border) !important; padding: 14px 18px !important; } .wishlist_table td { padding: 16px 18px !important; vertical-align: middle !important; border-bottom: 1px solid var(--terian-border) !important; } .wishlist_table .product-name a { font-family: 'Sarala', sans-serif !important; font-weight: 600 !important; color: var(--terian-dark) !important; text-decoration: none !important; } .wishlist_table .product-name a:hover { color: var(--terian-primary) !important; } .wishlist_table .product-price { font-weight: 700 !important; color: var(--terian-primary) !important; } /* Badges de contador en cabecera */ .header-icon-counter, .navbar-mini-cart .count, .handheld-footer-bar .count { background-color: var(--terian-primary) !important; color: #ffffff !important; font-weight: 700 !important; } /* ========================================================================== 10. MÓDULO DE ACCESORIOS Y CROSS-SELLS EXTENDIDO (FASE C) ========================================================================== */ .accessories { background: #ffffff !important; border: 1px solid var(--terian-border) !important; border-radius: 16px !important; padding: 28px !important; box-shadow: var(--terian-shadow) !important; margin-top: 15px !important; } .accessories .check-products { margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid var(--terian-border) !important; } .accessories .accessory-checkbox { margin-bottom: 10px !important; font-size: 14px !important; color: #334155 !important; } .accessories .accessory-checkbox input[type="checkbox"] { accent-color: var(--terian-primary) !important; margin-right: 8px !important; transform: scale(1.15) !important; } .accessories .col-right { background: #f8fafc !important; border: 1px solid var(--terian-border) !important; border-radius: 14px !important; padding: 24px 20px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; text-align: center !important; } .accessories .total-price { font-family: 'Sarala', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: var(--terian-dark) !important; margin-bottom: 16px !important; } .accessories .total-price-html { font-size: 22px !important; color: var(--terian-primary) !important; display: block !important; margin-bottom: 4px !important; } .accessories-add-all-to-cart .add-all-to-cart { background: var(--terian-primary) !important; border-color: var(--terian-primary) !important; color: #ffffff !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; padding: 12px 18px !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(0, 117, 158, 0.25) !important; transition: all 0.25s ease !important; width: 100% !important; } .accessories-add-all-to-cart .add-all-to-cart:hover { background: var(--terian-primary-hover) !important; border-color: var(--terian-primary-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(0, 117, 158, 0.35) !important; } /* ========================================================================== 11. PROPORCIONES LOGOTIPO OFICIAL B2TECH ========================================================================== */ .img-header-logo { max-height: 48px !important; width: auto !important; max-width: 220px !important; object-fit: contain !important; display: block !important; } .img-footer-logo, .footer-logo { max-height: 52px !important; width: auto !important; max-width: 240px !important; object-fit: contain !important; display: block !important; } @media (max-width: 768px) { .img-header-logo { max-height: 38px !important; max-width: 170px !important; } } /* ========================================================================== 9. B2B QUOTE-ONLY (< $50 MXN) & FOOTER OVERHAUL ========================================================================== */ /* --- Opción B: Insignias y Botones de Cotización --- */ .b2tech-quote-badge { display: inline-flex; align-items: center; gap: 6px; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; font-size: 0.88rem; font-weight: 600; border-radius: 6px; padding: 5px 12px; letter-spacing: 0.2px; } .b2tech-quote-badge i { color: #0284c7; } .b2tech-loop-quote-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #f0fdf4 !important; border: 1px solid #86efac !important; color: #166534 !important; font-size: 0.84rem !important; font-weight: 600 !important; padding: 7px 14px !important; border-radius: 6px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-loop-quote-btn:hover { background: #25D366 !important; border-color: #25D366 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25); } .b2tech-loop-quote-btn i { font-size: 1rem; } /* Ficha de Producto Individual: Card de Cotización */ .b2tech-quote-card { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #00759e; border-radius: 10px; padding: 22px 26px; margin: 22px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .b2tech-quote-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .b2tech-quote-chip { background: #e0f2fe; color: #0369a1; font-size: 0.84rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; border: 1px solid #bae6fd; } .b2tech-quote-stock-note { color: #16a34a; font-size: 0.84rem; font-weight: 600; } .b2tech-quote-text { font-size: 0.92rem; color: #475569; line-height: 1.6; margin-bottom: 18px; } .b2tech-quote-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .b2tech-btn-wa { background: #25D366 !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-btn-wa:hover { background: #1eb856 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); } .b2tech-btn-mail { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #1e293b !important; font-weight: 600 !important; padding: 10px 18px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-btn-mail:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; color: #0f172a !important; } .b2tech-quote-perks { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.8rem; color: #64748b; margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e2e8f0; } .b2tech-quote-perks span i { color: #00759e; margin-right: 5px; } /* ========================================================================== FOOTER B2B MODERNIZADO (TERIAN CORPORATE NAVY #071927) ========================================================================== */ #colophon.site-footer { background: #071927 !important; color: #94a3b8 !important; border-top: 3px solid #00759e !important; font-size: 0.82rem !important; } /* 1. Barra de Newsletter / CTA Corporativo */ .footer-newsletter { background: linear-gradient(135deg, #0a263d 0%, #071927 100%) !important; border-bottom: 1px solid #14324d !important; padding: 24px 0 !important; } .footer-newsletter .newsletter-title { font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; color: #ffffff !important; margin-bottom: 4px !important; letter-spacing: -0.2px; } .footer-newsletter .newsletter-marketing-text { font-family: 'Inter', sans-serif !important; color: #94a3b8 !important; font-size: 0.82rem !important; line-height: 1.45; } .footer-newsletter .newsletter-marketing-text strong { color: #38bdf8 !important; } .b2tech-footer-cta-quote { background: #00759e !important; border: 1px solid #0090c2 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 0.82rem !important; padding: 8px 18px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-footer-cta-quote:hover { background: #0087b5 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 117, 158, 0.4); } .b2tech-footer-cta-wa { background: #25D366 !important; border: 1px solid #25D366 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 0.82rem !important; padding: 8px 18px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-footer-cta-wa:hover { background: #1eb856 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); } /* 2. Cuerpo Principal del Footer y Columnas de Widgets */ .footer-bottom-widgets { background: #071927 !important; padding: 32px 0 20px !important; } .footer-contact { border-right: 1px solid #14324d; padding-right: 32px; } @media (max-width: 768px) { .footer-contact { border-right: none; padding-right: 0; margin-bottom: 24px; } } .footer-contact .call-us-text { color: #64748b !important; font-size: 0.76rem !important; } .footer-contact .call-us-number { color: #38bdf8 !important; font-size: 1.15rem !important; font-weight: 700 !important; font-family: 'Sarala', sans-serif !important; } .footer-contact .footer-address { margin-top: 10px; } .footer-contact .footer-address-title { color: #ffffff !important; font-family: 'Sarala', sans-serif !important; font-size: 0.84rem !important; text-transform: uppercase; letter-spacing: 0.5px; } .footer-contact address { color: #94a3b8 !important; font-size: 0.78rem !important; line-height: 1.5; margin-top: 3px; } .footer-contact .social-icons li a { background: #0d2c47 !important; color: #cbd5e1 !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; line-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.85rem !important; transition: all 0.2s ease !important; text-decoration: none !important; } .footer-contact .social-icons li a:hover { background: #00759e !important; color: #ffffff !important; transform: translateY(-2px); } /* Titulos de Widgets Inferiores */ .footer-bottom-widgets .widget-title { font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 0.92rem !important; color: #ffffff !important; letter-spacing: 0.2px; position: relative; display: inline-block; padding-bottom: 5px !important; margin-bottom: 12px !important; border-bottom: 2px solid #00759e; } /* Enlaces del Menu B2B */ .b2tech-footer-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; } .b2tech-footer-menu li { margin-bottom: 6px; } .b2tech-footer-menu li a { color: #94a3b8 !important; font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; text-decoration: none !important; transition: all 0.2s ease; display: inline-block; } .b2tech-footer-menu li a:hover { color: #38bdf8 !important; transform: translateX(4px); text-decoration: none !important; } .b2tech-footer-menu li a i { color: #00759e; margin-right: 5px; width: 14px; text-align: center; font-size: 0.75rem; } /* Top Footer Widgets Styling (Seamless Dark Navy) */ .footer-widgets { background: #061522 !important; padding: 28px 0 !important; border-bottom: 1px solid #14324d !important; } .footer-widgets .widget-title { color: #ffffff !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 0.92rem !important; border-bottom: 2px solid #00759e !important; display: inline-block !important; padding-bottom: 5px !important; margin-bottom: 14px !important; } .footer-widgets .product_list_widget li { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding: 7px 0 !important; } .footer-widgets .product_list_widget li a { color: #cbd5e1 !important; font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; } .footer-widgets .product_list_widget li a:hover { color: #38bdf8 !important; } .footer-widgets .product_list_widget .amount { color: #38bdf8 !important; font-weight: 600 !important; font-size: 0.8rem !important; } /* 3. Barra de Copyright y Trust Badges */ .copyright-bar { background: #04101b !important; border-top: 1px solid #0d263b !important; padding: 16px 0 !important; } .copyright-bar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .copyright-bar .float-start.copyright { float: none !important; font-size: 0.76rem !important; color: #64748b; margin: 0; } .copyright-bar .float-start.copyright a { color: #94a3b8; text-decoration: none; } .copyright-bar .float-start.copyright a:hover { color: #38bdf8; } .copyright-bar .float-end.payment { float: none !important; margin: 0; } .b2tech-footer-trust-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.76rem !important; color: #94a3b8; margin: 0 !important; } .b2tech-footer-trust-badges span { display: inline-flex; align-items: center; gap: 5px; } .b2tech-footer-trust-badges span i { color: #38bdf8; font-size: 0.85rem !important; } @media (max-width: 991px) { .copyright-bar .container { flex-direction: column; text-align: center; justify-content: center; } .b2tech-footer-trust-badges { justify-content: center; } } /* ========================================================================== B2TECH B2B: LIVE SEARCH AJAX CON SKUS Y PRECIOS ========================================================================== */ .twitter-typeahead .tt-menu { border-radius: 0 0 10px 10px !important; box-shadow: 0 12px 30px rgba(7, 25, 39, 0.16) !important; border: 1px solid #d2e3ed !important; border-top: none !important; padding: 6px 0 !important; background: #ffffff !important; max-height: 480px; overflow-y: auto; } .twitter-typeahead .tt-suggestion { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid #f1f5f9; transition: background-color 0.15s ease; } .twitter-typeahead .tt-suggestion:last-child { border-bottom: none; } .twitter-typeahead .tt-suggestion:hover, .twitter-typeahead .tt-suggestion.tt-cursor { background-color: #f0f7fb !important; } .b2tech-live-search-item { display: flex !important; align-items: center; padding: 10px 16px !important; text-decoration: none !important; gap: 14px; } .b2tech-live-thumb-wrap { width: 52px; height: 52px; flex-shrink: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2px; } .b2tech-live-thumb { max-width: 100%; max-height: 100%; object-fit: contain; } .b2tech-live-body { flex-grow: 1; min-width: 0; } .b2tech-live-sku { display: inline-block; font-size: 10.5px; font-weight: 700; color: #00759e; background: #e8f4f9; border: 1px solid #bce1f1; border-radius: 4px; padding: 1px 7px; margin-bottom: 3px; letter-spacing: 0.3px; text-transform: uppercase; } .b2tech-live-title { font-size: 13px; font-weight: 600; color: #1a202c !important; line-height: 1.35; margin: 0 0 3px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .b2tech-live-price { font-size: 13px; font-weight: 700; color: #00759e !important; } .b2tech-live-price .woocommerce-Price-amount { color: #00759e !important; } .b2tech-live-empty { padding: 14px 18px; font-size: 13px; color: #64748b; text-align: center; } /* ========================================================================== B2TECH B2B: CARRITO LATERAL OFF-CANVAS MODERNO ========================================================================== */ .off-canvas-cart { box-shadow: -8px 0 30px rgba(7, 25, 39, 0.22) !important; border-left: 1px solid #e2e8f0; z-index: 100050 !important; } .off-canvas-cart__header { background-color: #071927 !important; padding: 18px 24px !important; border-bottom: 2px solid #00759e !important; } .off-canvas-cart__header .section-title { color: #ffffff !important; font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0.8px; margin: 0; } .off-canvas-cart__header .electro-close-icon::before, .off-canvas-cart__header .electro-close-icon::after { background-color: #ffffff !important; } .off-canvas-cart__header .electro-close-icon:hover::before, .off-canvas-cart__header .electro-close-icon:hover::after { background-color: #0090c2 !important; } .off-canvas-cart .woocommerce-mini-cart__total { border-top: 1px solid #edf2f7 !important; background: #f8fafc !important; padding: 14px 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-family: 'Sarala', 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #071927 !important; margin: 0 !important; } .off-canvas-cart .woocommerce-mini-cart__total .woocommerce-Price-amount { color: #0A6C8C !important; font-size: 18px !important; font-weight: 700 !important; } /* Modern Action Buttons */ .off-canvas-cart .woocommerce-mini-cart__buttons { display: flex !important; flex-direction: row !important; gap: 12px !important; padding: 16px 24px 22px !important; background: #ffffff !important; border-top: 1px solid #f1f5f9 !important; margin: 0 !important; } .off-canvas-cart .woocommerce-mini-cart__buttons .button { flex: 1 1 50% !important; width: 50% !important; height: 44px !important; min-height: 44px !important; line-height: 44px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; border-radius: 8px !important; text-align: center !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; margin: 0 !important; } /* Secondary Button: Ver Carrito */ .off-canvas-cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) { background-color: #f8fafc !important; color: #0f2b42 !important; border: 1.5px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .off-canvas-cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover { background-color: #f1f5f9 !important; border-color: #0A6C8C !important; color: #0A6C8C !important; box-shadow: 0 3px 10px rgba(10, 108, 140, 0.15) !important; } /* Primary Button: Finalizar Compra */ .off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout { background: linear-gradient(135deg, #0A6C8C 0%, #0084cc 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 14px rgba(0, 132, 204, 0.28) !important; } .off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout:hover { background: linear-gradient(135deg, #085a75 0%, #0074b7 100%) !important; box-shadow: 0 6px 18px rgba(0, 132, 204, 0.4) !important; transform: translateY(-1px) !important; color: #ffffff !important; } @media (max-width: 360px) { .off-canvas-cart .woocommerce-mini-cart__buttons { flex-direction: column !important; gap: 8px !important; } .off-canvas-cart .woocommerce-mini-cart__buttons .button { width: 100% !important; flex: 1 1 100% !important; } } /* ========================================================================== B2TECH: ENDORSEMENT LOCKUP (UNA TIENDA DE TERIAN) ========================================================================== */ .header-logo-area { display: flex !important; align-items: center !important; } .b2tech-terian-header-lockup { display: flex; align-items: center; gap: 10px; margin-left: 14px; padding-left: 14px; border-left: 1.5px solid #d2e3ed; height: 38px; } .b2tech-terian-text-group { display: flex; flex-direction: column; justify-content: center; } .b2tech-terian-subtext { font-size: 9.5px; font-weight: 600; text-transform: uppercase; color: #64748b; letter-spacing: 0.5px; line-height: 1; margin-bottom: 2px; } .img-terian-header { height: 20px !important; width: auto !important; max-width: 95px !important; object-fit: contain !important; display: block; transition: transform 0.2s ease, opacity 0.2s ease; } .b2tech-terian-link:hover .img-terian-header { transform: scale(1.03); opacity: 0.9; } @media (max-width: 991px) { .b2tech-terian-header-lockup { display: none !important; } } .img-terian-inline { height: 17px !important; width: auto !important; vertical-align: middle; margin: 0 4px; display: inline-block; } /* ========================================================================== B2TECH: 3 COLUMNAS COMPACTAS EN FOOTER WIDGETS ========================================================================== */ .footer-widgets { display: flex !important; flex-wrap: wrap !important; margin-left: -10px !important; margin-right: -10px !important; } .footer-widgets .widget-column { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; width: 33.333333% !important; padding: 0 10px !important; box-sizing: border-box !important; } .footer-widgets .widget-title { font-size: 0.88rem !important; margin-bottom: 12px !important; padding-bottom: 5px !important; letter-spacing: 0.2px; } .footer-widgets .product_list_widget li { padding: 6px 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } .footer-widgets .product_list_widget li img { width: 44px !important; height: 44px !important; max-width: 44px !important; object-fit: contain !important; border-radius: 4px !important; background: #ffffff !important; padding: 2px !important; flex-shrink: 0 !important; margin: 0 !important; float: none !important; } .footer-widgets .product_list_widget li a { display: block !important; line-height: 1.3 !important; } .footer-widgets .product_list_widget li .product-title, .footer-widgets .product_list_widget li a span { font-size: 0.76rem !important; line-height: 1.3 !important; color: #cbd5e1 !important; font-weight: 500 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .footer-widgets .product_list_widget li a:hover span { color: #38bdf8 !important; } .footer-widgets .product_list_widget .amount { font-size: 0.78rem !important; color: #38bdf8 !important; font-weight: 700 !important; display: block !important; margin-top: 2px !important; } /* Compact quote badge inside footer widget list to fit 3 columns */ .footer-widgets .product_list_widget .b2tech-quote-card-btn, .footer-widgets .product_list_widget .b2tech-quote-pill { font-size: 10px !important; padding: 2px 7px !important; border-radius: 4px !important; margin-top: 3px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; line-height: 1.2 !important; } @media (max-width: 860px) { .footer-widgets .widget-column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-bottom: 22px !important; } } /* ========================================================================== B2TECH: BOTONES CTA CON PADDING DE 10px Y SEPARACIÓN ========================================================================== */ .b2tech-footer-cta-wrapper { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; } .b2tech-footer-cta-quote { background: #00759e !important; border: 1px solid #0090c2 !important; color: #ffffff !important; font-weight: 600 !important; font-size: 0.86rem !important; padding: 10px 22px !important; margin-right: 12px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.2s ease !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 117, 158, 0.25) !important; } .b2tech-footer-cta-quote:hover { background: #0087b5 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 117, 158, 0.4) !important; } .b2tech-footer-cta-wa { background: #25D366 !important; border: 1px solid #20ba5a !important; color: #ffffff !important; font-weight: 600 !important; font-size: 0.86rem !important; padding: 10px 22px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.2s ease !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25) !important; } .b2tech-footer-cta-wa:hover { background: #1eb856 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important; } /* ========================================================================== B2TECH: 3 COLUMNAS COMPACTAS Y ESTÉTICAS EN FOOTER WIDGETS ========================================================================== */ .footer-widgets { display: flex !important; flex-wrap: wrap !important; margin-left: -12px !important; margin-right: -12px !important; padding: 28px 0 !important; } .footer-widgets .widget-column { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; width: 33.333333% !important; padding: 0 12px !important; box-sizing: border-box !important; } .footer-widgets .widget-title { font-family: 'Sarala', sans-serif !important; font-weight: 700 !important; font-size: 0.92rem !important; color: #ffffff !important; border-bottom: 2px solid #00759e !important; display: inline-block !important; padding-bottom: 5px !important; margin-bottom: 14px !important; letter-spacing: 0.2px; } .footer-widgets .product_list_widget { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .footer-widgets .product_list_widget li { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 8px !important; padding: 9px 12px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; transition: all 0.2s ease !important; min-height: 64px !important; box-sizing: border-box !important; } .footer-widgets .product_list_widget li:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(0, 117, 158, 0.4) !important; transform: translateX(2px) !important; } .footer-widgets .product_list_widget li img { width: 44px !important; height: 44px !important; max-width: 44px !important; object-fit: contain !important; border-radius: 6px !important; background: #ffffff !important; padding: 2px !important; flex-shrink: 0 !important; margin: 0 !important; float: none !important; border: 1px solid #e2e8f0 !important; } .footer-widgets .product_list_widget li > a { display: flex !important; flex-direction: column !important; justify-content: center !important; flex-grow: 1 !important; min-width: 0 !important; text-decoration: none !important; } .footer-widgets .product_list_widget li .product-title, .footer-widgets .product_list_widget li a span:not(.amount):not(.woocommerce-Price-currencySymbol) { font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #e2e8f0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 0 3px 0 !important; } .footer-widgets .product_list_widget li a:hover span:not(.amount) { color: #38bdf8 !important; } .footer-widgets .product_list_widget .amount { font-size: 12px !important; color: #38bdf8 !important; font-weight: 700 !important; display: inline-block !important; margin-top: 2px !important; } /* Badge de Cotización Compacto y Elegante en el Widget */ .footer-widgets .product_list_widget .b2tech-quote-card-btn, .footer-widgets .product_list_widget .b2tech-quote-pill { font-size: 10px !important; font-weight: 600 !important; padding: 2px 7px !important; border-radius: 4px !important; background: rgba(0, 117, 158, 0.2) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; color: #38bdf8 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; line-height: 1.2 !important; margin-top: 2px !important; text-decoration: none !important; box-shadow: none !important; } @media (max-width: 860px) { .footer-widgets .widget-column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-bottom: 22px !important; } } /* ========================================================================== B2TECH: AJUSTE UNIFORME DE BOTONES Y BOTON NARANJA BAJO COTIZACION ========================================================================== */ /* 1. Botones CTA del Pie de Página (Solicitar Cotización y Chat Ejecutivo) */ .b2tech-footer-cta-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; justify-content: flex-end !important; } .b2tech-footer-cta-quote, .b2tech-footer-cta-wa { width: 220px !important; min-width: 220px !important; max-width: 220px !important; box-sizing: border-box !important; padding: 10px 18px !important; font-weight: 600 !important; font-size: 0.86rem !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; margin: 0 !important; transition: all 0.2s ease !important; text-decoration: none !important; } .b2tech-footer-cta-quote { background: #00759e !important; border: 1px solid #0090c2 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(0, 117, 158, 0.25) !important; } .b2tech-footer-cta-quote:hover { background: #0087b5 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 117, 158, 0.4) !important; } .b2tech-footer-cta-wa { background: #25D366 !important; border: 1px solid #20ba5a !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25) !important; } .b2tech-footer-cta-wa:hover { background: #1eb856 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important; } /* ========================================================================== MICRO-TARJETAS DE PRODUCTOS EN WIDGETS B2B (Vistos Recientemente / Recién Llegados / etc.) Muestra Marca, Modelo, Descripción Breve y Precio / Cotización sin recortes. Altura idéntica de 82px en todas las columnas y botón verde compacto con símbolo $. ========================================================================== */ .footer-widgets .product_list_widget { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } /* Tarjeta individual con altura uniforme exacta en las 3 columnas */ .footer-widgets .product_list_widget li.b2tech-widget-product-item, .footer-widgets .product_list_widget li { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; padding: 8px 12px !important; margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; transition: all 0.2s ease !important; height: 82px !important; min-height: 82px !important; max-height: 82px !important; box-sizing: border-box !important; position: relative !important; } .footer-widgets .product_list_widget li:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(56, 189, 248, 0.4) !important; transform: translateX(2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Thumbnail miniatura */ .footer-widgets .product_list_widget li .b2tech-widget-thumb-link { width: 50px !important; height: 50px !important; min-width: 50px !important; max-width: 50px !important; background: #ffffff !important; border-radius: 6px !important; border: 1px solid #1e3a56 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; padding: 2px !important; box-sizing: border-box !important; text-decoration: none !important; overflow: hidden !important; } .footer-widgets .product_list_widget li .b2tech-widget-thumb-link img, .footer-widgets .product_list_widget li > a > img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 !important; float: none !important; border: none !important; padding: 0 !important; background: transparent !important; } /* Bloque central de información con altura completa y distribución vertical uniforme */ .footer-widgets .product_list_widget li .b2tech-widget-info { flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 0 !important; padding: 1px 0 !important; box-sizing: border-box !important; } /* Línea 1: Marca • Modelo */ .footer-widgets .product_list_widget li .b2tech-widget-meta-line { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; line-height: 14px !important; height: 14px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .footer-widgets .product_list_widget li .b2tech-widget-brand { font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; color: #38bdf8 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; white-space: nowrap !important; } .footer-widgets .product_list_widget li .b2tech-widget-meta-sep { font-size: 9px !important; color: #64748b !important; user-select: none !important; } .footer-widgets .product_list_widget li .b2tech-widget-model { font-family: 'Inter', monospace, sans-serif !important; font-size: 9.5px !important; font-weight: 600 !important; color: #94a3b8 !important; letter-spacing: 0.2px !important; background: rgba(255, 255, 255, 0.06) !important; padding: 1px 4px !important; border-radius: 3px !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } /* Línea 2: Descripción breve con altura fija para 2 líneas */ .footer-widgets .product_list_widget li .b2tech-widget-title-link { text-decoration: none !important; display: block !important; height: 27px !important; max-height: 27px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .footer-widgets .product_list_widget li .b2tech-widget-desc, .footer-widgets .product_list_widget li .product-title { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #e2e8f0 !important; line-height: 13.5px !important; height: 27px !important; max-height: 27px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; transition: color 0.15s ease !important; } .footer-widgets .product_list_widget li .b2tech-widget-title-link:hover .b2tech-widget-desc, .footer-widgets .product_list_widget li a:hover .product-title { color: #38bdf8 !important; } /* Línea 3: Precio / Cotización con altura fija uniforme */ .footer-widgets .product_list_widget li .b2tech-widget-price-wrap { height: 20px !important; min-height: 20px !important; max-height: 20px !important; line-height: 20px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Anular margin-left: 95px de electro-price */ .footer-widgets .product_list_widget li .electro-price { margin: 0 !important; display: inline-flex !important; align-items: center !important; line-height: 20px !important; } .footer-widgets .product_list_widget li .amount { font-size: 12.5px !important; font-weight: 700 !important; color: #38bdf8 !important; margin: 0 !important; display: inline-block !important; line-height: 20px !important; } .footer-widgets .product_list_widget li del .amount { color: #64748b !important; font-size: 11px !important; font-weight: 400 !important; margin-right: 5px !important; } .footer-widgets .product_list_widget li ins { text-decoration: none !important; } /* Botón Verde B2B 'Precio bajo cotización' Compacto (Ajustado exactamente al texto con símbolo $) */ .footer-widgets .product_list_widget li .b2tech-quote-badge { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; max-width: fit-content !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; box-sizing: border-box !important; background: #16a34a !important; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; border: 1px solid #15803d !important; border-radius: 4px !important; color: #ffffff !important; padding: 0 8px !important; text-decoration: none !important; box-shadow: 0 1px 4px rgba(22, 163, 74, 0.3) !important; white-space: nowrap !important; line-height: 1 !important; margin: 0 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .footer-widgets .product_list_widget li .b2tech-quote-badge:hover { background: #15803d !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.5) !important; transform: translateY(-1px) !important; } .footer-widgets .product_list_widget li .b2tech-quote-badge i { font-size: 10px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; line-height: 1 !important; display: inline-block !important; } .footer-widgets .product_list_widget li .b2tech-quote-badge .b2tech-quote-text { font-family: 'Inter', sans-serif !important; font-size: 9.5px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; display: inline !important; } .footer-widgets .product_list_widget li .b2tech-quote-badge .b2tech-quote-text br { display: none !important; } /* ========================================================================== MARCA Y CATEGOR\u00cdA EN TARJETAS DE PRODUCTO B2B ========================================================================== */ .loop-product-categories { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 3px 6px !important; margin-bottom: 5px !important; line-height: 1.25 !important; } .loop-product-categories .product-brand-link { font-family: 'Inter', sans-serif !important; font-size: 0.76rem !important; font-weight: 700 !important; color: #00759e !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; display: inline-block !important; transition: color 0.15s ease !important; } .loop-product-categories .product-brand-link:hover { color: #0090c2 !important; text-decoration: underline !important; } .loop-product-categories .meta-sep { font-size: 0.72rem !important; color: #cbd5e1 !important; user-select: none !important; line-height: 1 !important; display: inline-block !important; } .loop-product-categories .product-category-link { font-family: 'Inter', sans-serif !important; font-size: 0.74rem !important; font-weight: 600 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; text-decoration: none !important; display: inline-block !important; transition: color 0.15s ease !important; } .loop-product-categories .product-category-link:hover { color: #0f172a !important; text-decoration: underline !important; } /* ========================================================================== TARJETAS DE SUBCATEGORÍAS B2B CON BALIZA PULSANTE OFICIAL ========================================================================== */ .section-product-categories { margin-bottom: 40px; } .section-product-categories header { margin-bottom: 24px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; position: relative; } .section-product-categories header .h1 { font-family: 'Sarala', 'Inter', sans-serif !important; font-size: 1.45rem !important; font-weight: 700 !important; color: #071927 !important; margin: 0 !important; letter-spacing: -0.01em; } .section-product-categories header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 65px; height: 2px; background: #00759e; } .section-product-categories .product-loop-categories { margin: 0 -10px; display: flex; flex-wrap: wrap; list-style: none; padding: 0; } .section-product-categories .product-category { padding: 0 10px; margin-bottom: 20px; box-sizing: border-box; } .section-product-categories .product-category a { position: relative; display: flex; flex-direction: column; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px !important; padding: 16px 16px 14px 16px; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 10px rgba(10, 108, 140, 0.04); overflow: hidden; } .section-product-categories .product-category a:hover { transform: translateY(-4px); border-color: #00759e; box-shadow: 0 10px 24px rgba(10, 108, 140, 0.12); } .section-product-categories .product-category a img { width: 100%; max-width: 240px; height: 190px; object-fit: cover; border-radius: 6px; margin-bottom: 14px; transition: transform 0.4s ease; background: #f8fafc; } .section-product-categories .product-category a:hover img { transform: scale(1.04); } .section-product-categories .product-category a .woocommerce-loop-category__title { font-family: 'Sarala', 'Inter', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #071927 !important; margin: 0 !important; text-align: center; transition: color 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 6px; } .section-product-categories .product-category a:hover .woocommerce-loop-category__title { color: #00759e !important; } .section-product-categories .product-category a .count { background: rgba(0, 117, 158, 0.08); color: #00759e; font-size: 0.8rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; } /* Baliza pulsante oficial de la tienda en la esquina superior */ .section-product-categories .product-category a::before { content: ''; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; background: #94D500; border-radius: 50%; box-shadow: 0 0 10px rgba(148, 213, 0, 0.9); animation: terianPulseDot 2s infinite ease-in-out; z-index: 5; pointer-events: none; } \n\n/* ==========================================================================\n /* ========================================================================== PIE DE PÁGINA MÓVIL: IDENTIDAD TERIAN & DATOS FISCALES CFDI 4.0 ========================================================================== */ .b2tech-mobile-fiscal-block { padding-bottom: 30px !important; margin-bottom: 15px !important; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; color: #e2e8f0; width: 100%; box-sizing: border-box; } .b2tech-mobile-terian-badge { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; text-align: center; } .b2tech-mobile-terian-badge .terian-badge-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #94D500; text-transform: uppercase; background: rgba(148, 213, 0, 0.12); border: 1px solid rgba(148, 213, 0, 0.35); padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; } .b2tech-mobile-terian-badge .terian-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #94D500; box-shadow: 0 0 6px #94D500; } .b2tech-mobile-terian-badge .terian-badge-desc { font-size: 12.5px; line-height: 1.5; color: #94a3b8; margin: 0; } .b2tech-mobile-terian-badge .terian-badge-desc a { color: #ffffff !important; text-decoration: underline; text-decoration-color: #94D500; font-weight: 600; } .b2tech-mobile-fiscal-box { background: #06111f; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-bottom: 16px; text-align: left; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .b2tech-fiscal-box-title { font-size: 11px; font-weight: 700; color: #94D500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .b2tech-fiscal-box-title i { font-size: 14px; } .b2tech-fiscal-cards-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; } .b2tech-fiscal-card { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; } .b2tech-fiscal-card.fiscal-card-rfc { background: rgba(148, 213, 0, 0.06); border-color: rgba(148, 213, 0, 0.45); box-shadow: 0 0 12px rgba(148, 213, 0, 0.08); } .b2tech-fiscal-card .fiscal-card-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 600; } .b2tech-fiscal-card.fiscal-card-rfc .fiscal-card-lbl { color: #94D500; } .b2tech-fiscal-card .fiscal-card-val { font-size: 13px; color: #ffffff; font-weight: 600; line-height: 1.3; } .b2tech-fiscal-card .fiscal-card-val.rfc-val { color: #94D500; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; } .b2tech-fiscal-notice { font-size: 11.5px; color: #94a3b8; line-height: 1.4; margin-bottom: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06); } .b2tech-fiscal-notice i { color: #00c853; margin-right: 4px; } .b2tech-copy-fiscal-btn { width: 100%; padding: 10px 14px; background: #00c853; color: #ffffff !important; border: none; border-radius: 8px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 3px 10px rgba(0, 200, 83, 0.3); } .b2tech-copy-fiscal-btn:hover { background: #009624; } .b2tech-copy-fiscal-btn.copied { background: #10b981; } .b2tech-mobile-legal-links { font-size: 11.5px; color: #64748b; margin-top: 14px; line-height: 1.6; } .b2tech-mobile-legal-links a { color: #94a3b8 !important; text-decoration: none; } .b2tech-mobile-legal-links a:hover { color: #ffffff !important; text-decoration: underline; } .b2tech-mobile-legal-links .sep { margin: 0 6px; color: #475569; } /* ========================================================================== B2TECH: CABECERA COMPACTA (REDUCCION DEL ALTO DEL AREA DE BUSQUEDA) ========================================================================== */ .header-v10 .masthead { padding: 8px 0 !important; } .site-header.header-v10 { padding-top: 0 !important; padding-bottom: 0 !important; } @media (min-width: 1200px) { .header-v10 { margin-bottom: 0 !important; } } .header-v10 .navbar-search { margin-bottom: 0 !important; } .header-v10 .navbar-search .input-group { margin-bottom: 0 !important; } /* secondary-nav-menu display none removed */ /* ========================================================================== B2TECH: ENLACES INTERACTIVOS EN PIE DE PÁGINA (WHATSAPP & MAILTO) ========================================================================== */ .footer-contact .call-us-number a.b2tech-call-us-wa-link, .footer-call-us .call-us-number a.b2tech-call-us-wa-link, a.b2tech-call-us-wa-link { color: #38bdf8 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; transition: all 0.25s ease !important; cursor: pointer !important; } .footer-contact .call-us-number a.b2tech-call-us-wa-link i, .footer-call-us .call-us-number a.b2tech-call-us-wa-link i { color: #25d366 !important; font-size: 1.15em !important; transition: transform 0.25s ease !important; } .footer-contact .call-us-number a.b2tech-call-us-wa-link:hover, .footer-call-us .call-us-number a.b2tech-call-us-wa-link:hover, a.b2tech-call-us-wa-link:hover { color: #25d366 !important; text-decoration: none !important; text-shadow: 0 0 10px rgba(37, 211, 102, 0.45) !important; } .footer-contact .call-us-number a.b2tech-call-us-wa-link:hover i, .footer-call-us .call-us-number a.b2tech-call-us-wa-link:hover i { transform: scale(1.2); } .footer-contact address a.b2tech-footer-mail-link, .footer-address address a.b2tech-footer-mail-link, a.b2tech-footer-mail-link { color: #38bdf8 !important; text-decoration: none !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: all 0.2s ease !important; cursor: pointer !important; } .footer-contact address a.b2tech-footer-mail-link i, .footer-address address a.b2tech-footer-mail-link i { color: #38bdf8 !important; font-size: 0.95em !important; transition: color 0.2s ease !important; } .footer-contact address a.b2tech-footer-mail-link:hover, .footer-address address a.b2tech-footer-mail-link:hover, a.b2tech-footer-mail-link:hover { color: #ffffff !important; text-decoration: underline !important; text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important; } .footer-contact address a.b2tech-footer-mail-link:hover i, .footer-address address a.b2tech-footer-mail-link:hover i { color: #ffffff !important; } @media (max-width: 768px) { .handheld-footer .footer-call-us .call-us-number a.b2tech-call-us-wa-link, .footer-v2 .footer-call-us .call-us-number a.b2tech-call-us-wa-link { justify-content: center !important; margin: 0 auto !important; } } /* ========================================================================== B2TECH: CABECERA Y BUSCADOR UNIFICADO (SINGLE ROW - NO WRAP) ========================================================================== */ .header-v10 .masthead, .masthead.row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 4px 0 !important; } .header-v10 .header-logo-area { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 14px !important; } .header-v10 .navbar-search, .navbar-search { flex: 1 1 0% !important; min-width: 0 !important; margin: 0 !important; } .header-v10 .header-icons, .header-icons { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } .header-icons .header-icon { padding: 0 2px !important; margin: 0 !important; display: flex !important; align-items: center !important; } .header-icons .header-icon > a { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 4px !important; color: #1e293b !important; text-decoration: none !important; transition: color 0.15s ease !important; } .header-icons .header-icon > a:hover { color: #0A6C8C !important; } .header-icons .header-icon i { font-size: 19px !important; color: #334155 !important; } .header-icons .header-icon > a:hover i { color: #0A6C8C !important; } /* Reducir fuente del Total de Carrito en Cabecera */ .header-icon__cart .cart-items-total-price, .header-icons .cart-items-total-price, .header-icons .total-price { display: inline-flex !important; align-items: baseline !important; gap: 2px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.2px !important; color: #0f172a !important; position: static !important; white-space: nowrap !important; line-height: 1.2 !important; } .header-icon__cart .cart-items-total-price .woocommerce-Price-amount, .header-icons .cart-items-total-price .woocommerce-Price-amount { font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; } .header-icon__cart .cart-items-total-price .woocommerce-Price-currencySymbol, .header-icons .cart-items-total-price .woocommerce-Price-currencySymbol { font-size: 11px !important; vertical-align: baseline !important; margin-right: 1px !important; top: 0 !important; right: 0 !important; } .header-icon__cart .cart-items-total-price .tax_label, .header-icons .cart-items-total-price .tax_label, .header-icons .cart-items-total-price small, .cart-items-total-price .tax_label, .cart-items-total-price small { display: inline-block !important; font-size: 0 !important; line-height: 1 !important; vertical-align: baseline !important; color: transparent !important; white-space: nowrap !important; } .header-icon__cart .cart-items-total-price .tax_label::after, .header-icons .cart-items-total-price .tax_label::after, .header-icons .cart-items-total-price small::after, .cart-items-total-price .tax_label::after, .cart-items-total-price small::after { content: '(IVA Inc.)' !important; display: inline !important; font-size: 10.5px !important; font-weight: 500 !important; color: #64748b !important; margin-left: 3px !important; letter-spacing: normal !important; text-transform: none !important; visibility: visible !important; } /* Buscador Moderno B2Tech: Menos redondeado (8px), alta definición y profundidad sutil */ .navbar-search .input-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; height: 42px !important; border: 1.5px solid #0A6C8C !important; border-radius: 8px !important; overflow: hidden !important; background: #ffffff !important; box-sizing: border-box !important; position: relative !important; margin-bottom: 0 !important; box-shadow: 0 1px 3px rgba(10, 108, 140, 0.08) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .navbar-search .input-group:focus-within { border-color: #0084cc !important; box-shadow: 0 0 0 3px rgba(0, 132, 204, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important; } .navbar-search .input-search-field { display: flex !important; flex: 1 1 0% !important; min-width: 60px !important; height: 100% !important; position: relative !important; } .navbar-search .input-search-field .product-search-field, .navbar-search .input-search-field input.form-control, .navbar-search .input-search-field input { width: 100% !important; height: 100% !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 16px !important; font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; color: #0f172a !important; background: #ffffff !important; } .navbar-search .input-search-field input::placeholder { color: #94a3b8 !important; font-size: 13.5px !important; } .navbar-search .twitter-typeahead { flex: 1 1 0% !important; width: 100% !important; height: 100% !important; display: flex !important; } .navbar-search .search-categories, .navbar-search .input-group-addon.search-categories { flex: 0 0 auto !important; display: flex !important; align-items: center !important; height: 100% !important; border: none !important; border-left: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: #f8fafc !important; padding: 0 10px !important; margin: 0 !important; transition: background 0.15s ease !important; } .navbar-search .search-categories:hover { background: #f1f5f9 !important; } .navbar-search .search-categories select, .navbar-search .search-categories select.resizeselect { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; cursor: pointer !important; padding-right: 14px !important; height: 100% !important; max-width: 145px !important; } .navbar-search .input-group-btn { flex: 0 0 auto !important; height: 100% !important; display: flex !important; margin: 0 !important; padding: 0 !important; } .navbar-search .input-group-btn .btn, .navbar-search .input-group-btn button { height: 100% !important; border: none !important; border-radius: 0 6.5px 6.5px 0 !important; background: linear-gradient(135deg, #0A6C8C 0%, #0084cc 100%) !important; color: #ffffff !important; padding: 0 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; } .navbar-search .input-group-btn .btn:hover, .navbar-search .input-group-btn button:hover { background: linear-gradient(135deg, #085a75 0%, #0074b7 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } .navbar-search .input-group-btn .btn i, .navbar-search .input-group-btn button i { font-size: 1.25rem !important; line-height: 1 !important; color: #ffffff !important; } /* B2TECH_TOPBAR_HOMOLOGATION_START */ /** * Homologación tipográfica estricta de Barra Superior (Top Bar) * Igualación matemática de fuente, tamaño, peso, color y alineación entre 'Mi cuenta' y 'En Cotización' */ /* Ocultar elementos estáticos vacíos para evitar doble separador '|' */ .top-bar #menu-item-7051, .top-bar .menu-item:empty, .top-bar li:has(.yamm-content:empty) { display: none !important; } .top-bar, .top-bar-v4, .top-bar .nav, .top-bar #menu-top-bar-right { font-size: 13px !important; font-family: 'Inter', sans-serif !important; } .top-bar .nav-inline .menu-item, .top-bar #menu-top-bar-right > li, .top-bar #menu-item-7031, .top-bar #quote-li, .top-bar .quote-li { font-size: 13px !important; font-family: 'Inter', sans-serif !important; line-height: 1.5 !important; } /* Homologación idéntica en tamaño (13px), familia (Inter), peso (500) y color (#475569) */ .top-bar #menu-item-7031 > a, .top-bar .nav-inline .menu-item > a, .top-bar #quote-li > a, .top-bar .quote-li .afrq-menu-item, .top-bar #total-items, .top-bar .totalitems { font-size: 13px !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; color: #475569 !important; line-height: 1.5 !important; letter-spacing: -0.1px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; } /* Separador '|' limpio y centrado */ .top-bar .nav-inline > .menu-item + .menu-item:before { content: '|' !important; color: #cbd5e1 !important; font-size: 13px !important; font-weight: 300 !important; display: inline-block !important; margin: 0 12px !important; vertical-align: middle !important; } /* Icono del carrito de cotización */ .top-bar .quote-li .dashicons-cart, .top-bar .quote-li .dashiconsc { font-size: 14px !important; width: 14px !important; height: 14px !important; line-height: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin-right: 5px !important; margin-top: -1px !important; color: #475569 !important; } /* Estados Hover idénticos */ .top-bar #menu-item-7031 > a:hover, .top-bar .nav-inline .menu-item > a:hover, .top-bar #quote-li > a:hover, .top-bar .quote-li .afrq-menu-item:hover, .top-bar .quote-li .afrq-menu-item:hover #total-items, .top-bar .quote-li .afrq-menu-item:hover .dashicons { color: #0A6C8C !important; } /* B2TECH_TOPBAR_HOMOLOGATION_END */ \n\n /* B2TECH_CHECKOUT_HOMOLOGATION_START */ /** * Homologacion Visual Integral de la Pagina de Checkout (Finalizar Compra) * Estandar B2B Terian: Tipografia Inter, Radios Modernos (8px), Tarjetas Limpias, * Erradicacion de formas redondeadas de 25px y Botones Corporativos */ /* 1. Encabezado de Pagina y Breadcrumbs */ body.woocommerce-checkout .woocommerce-breadcrumb { font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #64748b !important; margin-bottom: 12px !important; text-align: left !important; } body.woocommerce-checkout .entry-header { text-align: left !important; margin-bottom: 24px !important; padding-bottom: 16px !important; border-bottom: 1px solid #e2e8f0 !important; } body.woocommerce-checkout .entry-title { font-family: 'Inter', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.5px !important; margin: 0 !important; text-align: left !important; } /* 2. Banner de Cupon y Notificaciones de Checkout */ body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-message { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid #0A6C8C !important; border-radius: 8px !important; color: #334155 !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; padding: 14px 20px !important; margin-bottom: 24px !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important; } body.woocommerce-checkout .woocommerce-info:before { color: #0A6C8C !important; } body.woocommerce-checkout .woocommerce-info a { color: #0A6C8C !important; font-weight: 600 !important; text-decoration: underline !important; } body.woocommerce-checkout .woocommerce-info a:hover { color: #085a75 !important; } body.woocommerce-checkout form.checkout_coupon { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 20px !important; margin-bottom: 24px !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; } body.woocommerce-checkout form.checkout_coupon input.input-text { border-radius: 8px !important; height: 42px !important; border: 1px solid #cbd5e1 !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; } body.woocommerce-checkout form.checkout_coupon button.button { border-radius: 8px !important; height: 42px !important; background: #0f172a !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; padding: 0 20px !important; border: none !important; cursor: pointer !important; } /* 3. Encabezados de Secciones (Facturacion, Envio, Informacion Adicional) */ body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout .woocommerce-shipping-fields > h3, body.woocommerce-checkout .woocommerce-additional-fields > h3, body.woocommerce-checkout #order_review_heading_v2 { font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.3px !important; margin-top: 0 !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid #0A6C8C !important; position: relative !important; display: block !important; } /* Mantener oculto el heading duplicado exterior para preservar flexbox 2 columnas */ body.woocommerce-checkout form.woocommerce-checkout #order_review_heading { display: none !important; } body.woocommerce-checkout .woocommerce-billing-fields > h3:after, body.woocommerce-checkout .woocommerce-shipping-fields > h3:after, body.woocommerce-checkout .woocommerce-additional-fields > h3:after, body.woocommerce-checkout #order_review_heading_v2:after { display: none !important; } /* 4. Erradicacion estricta de bordes redondeados de 25px en TODOS los inputs */ body.woocommerce-checkout form.checkout .input-text, body.woocommerce-checkout form.checkout input[type="text"], body.woocommerce-checkout form.checkout input[type="email"], body.woocommerce-checkout form.checkout input[type="tel"], body.woocommerce-checkout form.checkout input[type="password"], body.woocommerce-checkout form.checkout select, body.woocommerce-checkout form.checkout textarea, body.woocommerce-checkout form.checkout .select2-container--default .select2-selection--single { border-radius: 8px !important; border: 1px solid #cbd5e1 !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: #0f172a !important; background-color: #ffffff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } body.woocommerce-checkout form.checkout input[type="text"], body.woocommerce-checkout form.checkout input[type="email"], body.woocommerce-checkout form.checkout input[type="tel"], body.woocommerce-checkout form.checkout input[type="password"], body.woocommerce-checkout form.checkout select { height: 44px !important; line-height: 42px !important; padding: 0 14px !important; } body.woocommerce-checkout form.checkout textarea { padding: 12px 14px !important; min-height: 100px !important; line-height: 1.5 !important; } /* Select2 selector */ body.woocommerce-checkout form.checkout .select2-container--default .select2-selection--single { height: 44px !important; border-radius: 8px !important; border: 1px solid #cbd5e1 !important; display: flex !important; align-items: center !important; } body.woocommerce-checkout form.checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 14px !important; color: #0f172a !important; font-size: 14px !important; font-family: 'Inter', sans-serif !important; } body.woocommerce-checkout form.checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; right: 12px !important; } /* Estado Focus elegante */ body.woocommerce-checkout form.checkout .input-text:focus, body.woocommerce-checkout form.checkout input:focus, body.woocommerce-checkout form.checkout select:focus, body.woocommerce-checkout form.checkout textarea:focus, body.woocommerce-checkout form.checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: #0A6C8C !important; box-shadow: 0 0 0 3px rgba(10, 108, 140, 0.15) !important; outline: none !important; } /* Etiquetas (Labels) del formulario */ body.woocommerce-checkout form.checkout .form-row label { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; margin-bottom: 6px !important; display: block !important; line-height: 1.4 !important; } body.woocommerce-checkout form.checkout .form-row label abbr.required { color: #e11d48 !important; text-decoration: none !important; font-weight: 700 !important; } body.woocommerce-checkout form.checkout .form-row label .optional { color: #94a3b8 !important; font-size: 12px !important; font-weight: 400 !important; } /* 5. Contenedor Lateral 'Tu Pedido' (.order-review-wrapper) */ body form.woocommerce-checkout .order-review-wrapper { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important; padding: 24px !important; margin-bottom: 30px !important; } body.woocommerce-checkout #order_review { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 24px !important; border: none !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th { background: #f8fafc !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #475569 !important; padding: 12px 14px !important; border: none !important; border-bottom: 1px solid #e2e8f0 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td { padding: 14px 10px !important; border: none !important; border-bottom: 1px solid #f1f5f9 !important; font-family: 'Inter', sans-serif !important; vertical-align: middle !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name { font-size: 13px !important; font-weight: 500 !important; color: #1e293b !important; line-height: 1.45 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total { font-size: 13px !important; font-weight: 600 !important; color: #0f172a !important; text-align: right !important; white-space: nowrap !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; padding: 12px 10px !important; border: none !important; border-top: 1px solid #f1f5f9 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #0f172a !important; text-align: right !important; padding: 12px 10px !important; border: none !important; border-top: 1px solid #f1f5f9 !important; } body.woocommerce-checkout #shipping_method { list-style: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-checkout #shipping_method li { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin-bottom: 6px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; } body.woocommerce-checkout #shipping_method li input[type="radio"] { accent-color: #0A6C8C !important; margin-right: 8px !important; margin-top: 0 !important; cursor: pointer !important; flex-shrink: 0 !important; } body.woocommerce-checkout #shipping_method li label { cursor: pointer !important; margin: 0 !important; color: #334155 !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } body.woocommerce-checkout #shipping_method li label > span, body.woocommerce-checkout #shipping_method li label > span.amount { position: static !important; display: inline !important; color: #0f172a !important; font-weight: 600 !important; margin-left: 4px !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; border-top: 2px solid #e2e8f0 !important; padding-top: 16px !important; vertical-align: top !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td { font-size: 18px !important; font-weight: 800 !important; color: #0A6C8C !important; border-top: 2px solid #e2e8f0 !important; padding-top: 16px !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td small.includes_tax { font-size: 12px !important; font-weight: 400 !important; color: #64748b !important; display: block !important; margin-top: 4px !important; } /* 6. Pasarelas de Pago (#payment) */ body.woocommerce-checkout #payment { background: transparent !important; border: none !important; border-top: 1px solid #e2e8f0 !important; padding: 20px 0 0 0 !important; } body.woocommerce-checkout #payment ul.payment_methods { border: 1px solid #e2e8f0 !important; border-radius: 8px !important; overflow: hidden !important; margin: 0 0 20px 0 !important; padding: 0 !important; background: #ffffff !important; list-style: none !important; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method { padding: 14px 16px !important; border-bottom: 1px solid #f1f5f9 !important; font-family: 'Inter', sans-serif !important; background: #ffffff !important; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child { border-bottom: none !important; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] { accent-color: #0A6C8C !important; margin-right: 8px !important; cursor: pointer !important; float: none !important; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label { font-weight: 600 !important; font-size: 14px !important; color: #0f172a !important; cursor: pointer !important; display: inline !important; margin: 0 !important; } body.woocommerce-checkout #payment .payment_box { background: #f8fafc !important; border-radius: 6px !important; border: 1px solid #e2e8f0 !important; padding: 12px 14px !important; margin: 12px 0 6px 0 !important; font-size: 13px !important; color: #475569 !important; line-height: 1.5 !important; } /* 7. Boton Principal 'Realizar el pedido' */ body.woocommerce-checkout #payment #place_order, body.woocommerce-checkout #place_order.button { width: 100% !important; background: linear-gradient(135deg, #0A6C8C 0%, #0084cc 100%) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 16px 24px !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; box-shadow: 0 4px 14px rgba(10, 108, 140, 0.25) !important; cursor: pointer !important; transition: all 0.2s ease !important; display: block !important; text-align: center !important; margin-top: 16px !important; } body.woocommerce-checkout #payment #place_order:hover, body.woocommerce-checkout #place_order.button:hover { background: linear-gradient(135deg, #085a75 0%, #0074b7 100%) !important; box-shadow: 0 6px 20px rgba(10, 108, 140, 0.35) !important; transform: translateY(-1px) !important; color: #ffffff !important; } /* 8. Textos legales y Terminos */ body.woocommerce-checkout .woocommerce-privacy-policy-text, body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: #64748b !important; line-height: 1.5 !important; margin-bottom: 16px !important; } body.woocommerce-checkout .woocommerce-privacy-policy-text a, body.woocommerce-checkout .woocommerce-terms-and-conditions-link { color: #0A6C8C !important; text-decoration: underline !important; } /* B2TECH_CHECKOUT_HOMOLOGATION_END */ /* B2TECH_MENU_MODERNIZATION_START */ /** * Modernizacion Integral del Sistema de Navegacion (Menu B2Tech / Terian) * - Version Escritorio: Cabecera compacta y optimizada (reduccion de altura de 137px a ~84px), * barra secundaria fluida sin saltos ni desplazamientos, items en linea fija (no-wrap), * menus desplegables (Categorias, Marcas Lideres) 100% visibles al hover/focus con fondo solido * institucional de alto contraste y z-index prioritario sobre el hero banner. * - Version Movil: Cabecera compacta, boton hamburguesa y off-canvas drawer empresarial. */ /* ========================================================================== 0. REGLAS GLOBALES Y CONTROL DE ALTURA COMPACTA ========================================================================== */ .site-header a.site-dark-logo, .site-header .site-dark-logo, .site-dark-logo { display: none !important; } /* Stacking context prioritario para que ningun banner o slider cubra los desplegables */ .site-header, .site-header.header-v10, .stick-this, .header-v10 .stick-this, .header-v10 .masthead, .header-v10 .masthead.row, .secondary-nav-menu, .secondary-nav-menu .container { position: relative !important; z-index: 99999 !important; } /* Reduccion de altura de la cabecera */ .site-header.header-v10 { padding-top: 0 !important; padding-bottom: 0 !important; background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; } .header-v10 .masthead, .masthead.row { padding-top: 8px !important; padding-bottom: 4px !important; margin-bottom: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; } /* Logo compacto */ .header-v10 .header-logo-area { height: 38px !important; min-height: 38px !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-right: 18px !important; } .header-v10 .header-logo-area img.img-header-logo { max-height: 34px !important; width: auto !important; object-fit: contain !important; } /* Buscador compacto */ .header-v10 .navbar-search { height: 36px !important; min-height: 36px !important; margin: 0 !important; flex: 1 1 auto !important; } .header-v10 .navbar-search .input-group { height: 36px !important; min-height: 36px !important; } .header-v10 .navbar-search input.product-search-field, .header-v10 .navbar-search .input-search-field input { height: 36px !important; min-height: 36px !important; padding-top: 3px !important; padding-bottom: 3px !important; font-size: 13px !important; } .header-v10 .navbar-search select.postform, .header-v10 .navbar-search .search-categories select { height: 36px !important; min-height: 36px !important; padding-top: 3px !important; padding-bottom: 3px !important; font-size: 13px !important; } .header-v10 .navbar-search button.btn-secondary, .header-v10 .navbar-search .input-group-btn button { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; } /* Iconos de cabecera compactos */ .header-v10 .header-icons { flex: 0 0 auto !important; height: 38px !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } /* ========================================================================== 1. BARRA DE NAVEGACION SECUNDARIA (DESKTOP NAVBAR) ========================================================================== */ @media (min-width: 992px) { .site-header .header-logo-area .off-canvas-navigation-wrapper, .site-header .header-logo-area .off-canvas-navbar-toggle-buttons, .site-header .header-logo-area .navbar-toggler, .site-header .header-logo-area .navbar-toggle-hamburger, .site-header:not(.handheld-header) .off-canvas-navigation-wrapper { display: none !important; } } /* Barra secundaria compacta y estable */ .site-header .secondary-nav-menu, .site-header .electro-navbar-primary, .electro-navbar-primary { background: linear-gradient(90deg, #071927 0%, #0A6C8C 60%, #0084cc 100%) !important; border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 3px 8px rgba(7, 25, 39, 0.16) !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; display: block !important; border-radius: 6px !important; min-height: 36px !important; height: 36px !important; margin-top: 12px !important; margin-bottom: 12px !important; padding: 0 8px !important; position: relative !important; z-index: 100000 !important; overflow: visible !important; } /* Flex sin salto de linea: Prohibe envolver o desplazarse */ .site-header .secondary-nav-menu .secondary-nav, .site-header .secondary-nav, ul#menu-menu-principal-b2b-1 { display: flex !important; flex-wrap: nowrap !important; /* CLAVE: Prohibe envolver a segunda linea */ white-space: nowrap !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; list-style: none !important; height: 36px !important; } /* Items individuales (li): Invariables, sin encogimiento */ .site-header .secondary-nav-menu .secondary-nav > .menu-item, .site-header .secondary-nav > .menu-item, ul#menu-menu-principal-b2b-1 > .menu-item { margin: 0 !important; padding: 0 !important; position: relative !important; flex-shrink: 0 !important; /* CLAVE: Prohibe encogimiento */ display: inline-flex !important; align-items: center !important; height: 36px !important; } /* Enlaces principales: Tipografia Inter 600, blanco alto contraste, altura ajustada a 36px */ .site-header .secondary-nav-menu .secondary-nav > .menu-item > a, .site-header .secondary-nav > .menu-item > a, ul#menu-menu-principal-b2b-1 > .menu-item > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.15px !important; padding: 0 13px !important; display: inline-flex !important; align-items: center !important; height: 36px !important; line-height: 36px !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; transition: background-color 0.18s ease, color 0.18s ease !important; border-radius: 4px !important; margin: 0 1px !important; } /* Hover en enlaces principales */ .site-header .secondary-nav-menu .secondary-nav > .menu-item:hover > a, .site-header .secondary-nav > .menu-item:hover > a, ul#menu-menu-principal-b2b-1 > .menu-item:hover > a { background-color: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } /* Item activo de la pagina */ .site-header .secondary-nav-menu .secondary-nav > .menu-item.current-menu-item > a, .site-header .secondary-nav > .menu-item.current-menu-item > a, ul#menu-menu-principal-b2b-1 > .menu-item.current-menu-item > a { background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; box-shadow: inset 0 -2px 0 0 #38bdf8 !important; } /* Flechitas indicadoras de dropdown */ .site-header .secondary-nav > .menu-item.dropdown > a::after, .site-header ul#menu-menu-principal-b2b > .menu-item.dropdown > a::after, .site-header ul#menu-menu-principal-b2b-1 > .menu-item.dropdown > a::after { display: inline-block !important; margin-left: 5px !important; vertical-align: middle !important; content: "" !important; border-top: 4px solid #ffffff !important; border-right: 4px solid transparent !important; border-bottom: 0 !important; border-left: 4px solid transparent !important; opacity: 0.9 !important; } /* ========================================================================== 2. MENUS DESPLEGABLES (DROPDOWNS CATEGORIAS Y MARCAS LIDERES) - VISIBILIDAD INMEDIATA AL HOVER O FOCO - FONDO SOLIDO AZUL INSTITUCIONAL PROFUNDO (NO TRANSPARENTE, NO LAVADO) - Z-INDEX SUPERIOR ABSOLUTO (NO TAPADO POR EL BANNER HERO) ========================================================================== */ /* Regla madre: Desplegar menu al pasar el mouse (:hover) o interactuar (:focus-within / .open / .show) */ .site-header .secondary-nav-menu .menu-item.dropdown:hover > .dropdown-menu, .site-header .secondary-nav-menu .menu-item.dropdown:focus-within > .dropdown-menu, .site-header .secondary-nav-menu .menu-item.dropdown.show > .dropdown-menu, .site-header .secondary-nav-menu .menu-item.dropdown.open > .dropdown-menu, .site-header .secondary-nav > .menu-item.dropdown:hover > .dropdown-menu, .site-header .secondary-nav > .menu-item.dropdown:focus-within > .dropdown-menu, .site-header .secondary-nav > .menu-item.dropdown.show > .dropdown-menu, .site-header .secondary-nav > .menu-item.dropdown.open > .dropdown-menu, ul#menu-menu-principal-b2b-1 > .menu-item.dropdown:hover > .dropdown-menu, ul#menu-menu-principal-b2b-1 > .menu-item.dropdown:focus-within > .dropdown-menu, ul#menu-menu-principal-b2b-1 > .menu-item.dropdown.show > .dropdown-menu, ul#menu-menu-principal-b2b-1 > .menu-item.dropdown.open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } /* Tarjeta flotante del desplegable: Fondo solido institucional, borde cian, sombra profunda */ .site-header .secondary-nav-menu .dropdown-menu, .site-header .secondary-nav .dropdown-menu, ul#menu-menu-principal-b2b-1 .dropdown-menu, .secondary-nav-menu .dropdown-menu { position: absolute !important; top: 100% !important; left: 0 !important; min-width: 260px !important; background: #081726 !important; /* Fondo solido de alta tecnologia */ border: 1px solid rgba(56, 189, 248, 0.35) !important; border-top: 3px solid #38bdf8 !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(10, 108, 140, 0.3) !important; padding: 6px 0 !important; margin-top: 0 !important; z-index: 999999 !important; /* Siempre encima de cualquier hero o canvas */ overflow: visible !important; transition: opacity 0.18s ease, transform 0.18s ease !important; } /* Items individuales del desplegable */ .site-header .secondary-nav-menu .dropdown-menu li, .site-header .secondary-nav .dropdown-menu li, ul#menu-menu-principal-b2b-1 .dropdown-menu li { padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; } /* Enlaces del desplegable: Texto claro de alto contraste y legibilidad */ .site-header .secondary-nav-menu .dropdown-menu li > a, .site-header .secondary-nav .dropdown-menu li > a, ul#menu-menu-principal-b2b-1 .dropdown-menu li > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; color: #e2e8f0 !important; /* Gris perla de alto contraste */ padding: 8px 18px !important; display: flex !important; align-items: center !important; line-height: 1.35 !important; text-shadow: none !important; transition: all 0.15s ease !important; border-radius: 0 !important; margin: 0 !important; text-decoration: none !important; background: transparent !important; } /* Hover sobre elementos del desplegable: Verde Terian y fondo cian sutil */ .site-header .secondary-nav-menu .dropdown-menu li > a:hover, .site-header .secondary-nav .dropdown-menu li > a:hover, ul#menu-menu-principal-b2b-1 .dropdown-menu li > a:hover { background-color: rgba(14, 116, 144, 0.45) !important; color: #94D500 !important; /* Verde Terian corporativo */ padding-left: 22px !important; font-weight: 600 !important; } /* ========================================================================== 3. VERSION MOVIL (MOBILE < 992px) ========================================================================== */ @media (max-width: 991px) { .site-header .header-navbar, .site-header .navbar-primary, .site-header .secondary-nav-menu { display: none !important; } .handheld-header, .mobile-header-v1, .mobile-header-v2 { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; padding: 8px 0 !important; display: flex !important; align-items: center !important; } /* Boton Hamburguesa Movil */ .mobile-header-v1 .off-canvas-navigation-wrapper, .mobile-header-v2 .off-canvas-navigation-wrapper, .handheld-header .off-canvas-navigation-wrapper { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; } .mobile-header-v1 .header-logo, .mobile-header-v2 .header-logo { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; } .mobile-header-v1 .navbar-toggle-hamburger, .mobile-header-v2 .navbar-toggle-hamburger, .handheld-header .navbar-toggle-hamburger { background: transparent !important; border: none !important; color: #0f172a !important; font-size: 24px !important; padding: 6px 10px !important; cursor: pointer !important; line-height: 1 !important; } .mobile-header-v1 .navbar-toggle-hamburger i, .mobile-header-v2 .navbar-toggle-hamburger i, .handheld-header .navbar-toggle-hamburger i { color: #0f172a !important; } } /* Off-Canvas Drawer (Menu Lateral Movil Deslizante) */ .off-canvas-navigation { position: fixed !important; top: 0 !important; bottom: 0 !important; left: -320px !important; width: 280px !important; max-width: 82vw !important; background: #ffffff !important; box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18) !important; transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important; z-index: 10000 !important; visibility: hidden !important; pointer-events: none !important; overflow-y: auto !important; } .off-canvas-navigation-wrapper.toggled .off-canvas-navigation { left: 0 !important; visibility: visible !important; pointer-events: auto !important; } /* Encabezado dentro del drawer */ .off-canvas-navigation::before { content: "B2TECH | TIENDA TERIAN"; display: block; background: #071927; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; padding: 16px 20px 14px; border-bottom: 2px solid #0A6C8C; } /* Boton Hamburguesa y Cierre en el Header */ .off-canvas-navigation-wrapper .off-canvas-navbar-toggle-buttons { background: transparent !important; border: none !important; padding: 0 !important; } .off-canvas-navigation-wrapper .navbar-toggle-hamburger { background: transparent !important; border: none !important; color: #071927 !important; font-size: 22px !important; padding: 6px !important; cursor: pointer !important; } .off-canvas-navigation-wrapper.toggled .navbar-toggle-hamburger { display: none !important; } .off-canvas-navigation-wrapper .navbar-toggle-close { display: none !important; } .off-canvas-navigation-wrapper.toggled .navbar-toggle-close { display: inline-flex !important; position: fixed !important; top: 14px !important; left: 234px !important; z-index: 10001 !important; background: rgba(7, 25, 39, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; color: #ffffff !important; width: 32px !important; height: 32px !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 15px !important; transition: all 0.2s ease !important; } .off-canvas-navigation-wrapper .navbar-toggle-close:hover { background: #e11d48 !important; border-color: #e11d48 !important; color: #ffffff !important; } /* Enlaces del Drawer Movil */ .off-canvas-navigation, .off-canvas-navigation .nav, .off-canvas-navigation ul#menu-menu-principal-b2b-1 { display: block !important; width: 100% !important; padding: 10px 0 !important; margin: 0 !important; list-style: none !important; } .off-canvas-navigation .nav > .menu-item, .off-canvas-navigation ul#menu-menu-principal-b2b-1 > .menu-item { border-bottom: 1px solid #f1f5f9 !important; margin: 0 !important; display: block !important; width: 100% !important; float: none !important; clear: both !important; } .off-canvas-navigation .nav > .menu-item > a, .off-canvas-navigation ul#menu-menu-principal-b2b-1 > .menu-item > a { font-family: 'Inter', sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1e293b !important; padding: 12px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; text-decoration: none !important; transition: background-color 0.15s ease, color 0.15s ease !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; text-shadow: none !important; } .off-canvas-navigation .nav > .menu-item > a:hover, .off-canvas-navigation .nav > .menu-item.current-menu-item > a, .off-canvas-navigation ul#menu-menu-principal-b2b-1 > .menu-item > a:hover, .off-canvas-navigation ul#menu-menu-principal-b2b-1 > .menu-item.current-menu-item > a { background-color: #f8fafc !important; color: #0A6C8C !important; } /* Submenus en el drawer movil */ .off-canvas-navigation .nav .dropdown-menu { background-color: #f8fafc !important; border: none !important; border-left: 3px solid #0A6C8C !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 0 !important; margin: 0 !important; } .off-canvas-navigation .nav .dropdown-menu li > a { font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; color: #475569 !important; padding: 8px 22px 8px 30px !important; display: block !important; } .off-canvas-navigation .nav .dropdown-menu li > a:hover { color: #0A6C8C !important; background-color: #f1f5f9 !important; font-weight: 600 !important; } /* B2TECH_MENU_MODERNIZATION_END */ /* B2TECH_PRODUCT_MODEL_CSS_START */ /* ========================================================================== B2TECH B2B PRODUCT CARDS: PATRON MARCA + MODELO + DESCRIPCION + PRECIO + EXISTENCIA ========================================================================== */ /* Alineacion y orden visual en el pie de la tarjeta */ .product-loop-footer, .product-item__footer { display: flex !important; flex-direction: column !important; padding-top: 10px !important; margin-top: 6px !important; border-top: 1px solid #f1f5f9 !important; } /* ORDEN VISUAL EXACTO AL PATRON: 1. Modelo (código directo sin etiqueta 'MODELO:' + botón copiar) 2. Precio (con desglose y botón de cotizar/carrito) 3. Existencia (badge con icono de caja plano monocromático verde) 4. Acciones secundarias (Guardar en Proyecto) */ /* 1. MODELO / SKU DIRECTO CON BOTON DE COPIAR */ .product-loop-footer .product-model-row { order: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; padding: 5px 8px !important; margin-bottom: 8px !important; transition: all 0.2s ease !important; box-sizing: border-box !important; width: 100% !important; } .product-loop-footer .product-model-row:hover { border-color: #0A6C8C !important; background: #f0fdfa !important; } .product-model-code { font-family: 'Inter', monospace, sans-serif !important; font-size: 0.83rem !important; font-weight: 700 !important; color: #071927 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex-grow: 1 !important; text-align: left !important; letter-spacing: 0.01em !important; } /* Boton de copiar modelo */ .btn-copy-model { background: transparent !important; border: none !important; padding: 3px !important; cursor: pointer !important; color: #0A6C8C !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; transition: all 0.15s ease !important; flex-shrink: 0 !important; position: relative !important; } .btn-copy-model:hover { color: #071927 !important; background-color: #e2e8f0 !important; transform: scale(1.1) !important; } .btn-copy-model .copy-tooltip { position: absolute !important; bottom: calc(100% + 6px) !important; left: 50% !important; transform: translateX(-50%) translateY(4px) scale(0.9) !important; background: #071927 !important; color: #ffffff !important; font-size: 0.70rem !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: 4px !important; white-space: nowrap !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 100 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25) !important; } .btn-copy-model .copy-tooltip::after { content: '' !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; border-width: 4px !important; border-style: solid !important; border-color: #071927 transparent transparent transparent !important; } .btn-copy-model.copied { color: #16a34a !important; } .btn-copy-model.copied .copy-tooltip { opacity: 1 !important; transform: translateX(-50%) translateY(0) scale(1) !important; background: #16a34a !important; } .btn-copy-model.copied .copy-tooltip::after { border-color: #16a34a transparent transparent transparent !important; } /* 2. PRECIO Y BOTON DE ACCION */ .product-loop-footer .price-add-to-cart { order: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 2px !important; margin-bottom: 8px !important; min-height: 40px !important; } /* 3. EXISTENCIA (BADGE CON ICONO DE CAJITA PLANO MONOCROMATICO VERDE) */ .product-loop-footer .availability { order: 3 !important; font-size: 0 !important; /* Oculta texto crudo 'Disponibilidad: ' */ margin-bottom: 8px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; width: fit-content !important; } /* Eliminar emoji anterior */ .product-loop-footer .availability::before { display: none !important; content: none !important; } .product-loop-footer .availability .electro-stock-availability { font-size: 0.78rem !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; } /* Píldora de existencia */ .product-loop-footer .availability .stock { font-size: 0.78rem !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 3px 9px !important; border-radius: 6px !important; line-height: 1.25 !important; } /* Icono de cajita plano, vectorial y monocromático en color verde (#16a34a) */ .product-loop-footer .availability .stock::before { content: "" !important; display: inline-block !important; width: 14px !important; height: 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; flex-shrink: 0 !important; } /* En stock / Disponibles: badge verde limpio con texto verde */ .product-loop-footer .availability .stock.in-stock { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; } /* Agotado: caja roja y estilo rojizo */ .product-loop-footer .availability .stock.out-of-stock { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; } .product-loop-footer .availability .stock.out-of-stock::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") !important; } /* 4. GUARDAR EN PROYECTO */ .product-loop-footer .yith-wcwl-add-to-wishlist { order: 4 !important; margin-top: 4px !important; } /* 5. HOVER AREA */ .product-loop-footer .hover-area { order: 5 !important; } /* Titulo del producto con altura uniforme para cuadrar el grid */ .products[data-view="grid"] .woocommerce-loop-product__title { min-height: 2.85em !important; max-height: 2.85em !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; line-height: 1.4 !important; font-size: 0.875rem !important; margin-bottom: 8px !important; } /* B2TECH_PRODUCT_MODEL_CSS_END */ /* ========================================================================== B2TECH: VISTA DE PRODUCTO - MODELO EN CABECERA Y BOTONES MODERNIZADOS ========================================================================== */ /* 1. Badge de Modelo junto a la Marca en cabecera de producto */ .loop-product-categories .product-brand-model { font-family: 'Inter', sans-serif !important; font-size: 0.74rem !important; font-weight: 700 !important; color: #0f172a !important; background: #f1f5f9 !important; padding: 2px 8px !important; border-radius: 4px !important; border: 1px solid #cbd5e1 !important; letter-spacing: 0.5px !important; display: inline-block !important; line-height: 1.25 !important; text-transform: uppercase !important; vertical-align: middle !important; } /* 2. Botones de accion en la caja de compra (product-actions-wrapper) */ .single-product .product-actions .action-buttons { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; margin: 16px 0 0 0 !important; padding: 0 !important; } .single-product .product-actions .action-buttons .yith-wcwl-add-to-wishlist { width: 100% !important; margin: 0 !important; display: block !important; } .single-product .product-actions .action-buttons .yith-wcwl-add-button, .single-product .product-actions .action-buttons .yith-wcwl-wishlistaddedbrowse, .single-product .product-actions .action-buttons .yith-wcwl-wishlistexistsbrowse { width: 100% !important; display: block !important; } .single-product .product-actions .action-buttons .yith-wcwl-add-button a, .single-product .product-actions .action-buttons .yith-wcwl-wishlistaddedbrowse a, .single-product .product-actions .action-buttons .yith-wcwl-wishlistexistsbrowse a, .single-product .product-actions .action-buttons .add-to-compare-link { width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 10px !important; padding: 10px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 0.84rem !important; font-weight: 600 !important; color: #1e293b !important; background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; line-height: 1.3 !important; } .single-product .product-actions .action-buttons .yith-wcwl-add-button a:hover, .single-product .product-actions .action-buttons .yith-wcwl-wishlistaddedbrowse a:hover, .single-product .product-actions .action-buttons .yith-wcwl-wishlistexistsbrowse a:hover, .single-product .product-actions .action-buttons .add-to-compare-link:hover { background-color: #f0f9ff !important; border-color: #0284c7 !important; color: #0284c7 !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important; transform: translateY(-1px) !important; } .single-product .product-actions .action-buttons svg, .single-product .product-actions .action-buttons i { width: 17px !important; height: 17px !important; font-size: 16px !important; color: #0284c7 !important; flex-shrink: 0 !important; } .single-product .product-actions .action-buttons .add-to-compare-link::before { font: normal normal normal 16px/1 font-electro !important; content: "\64" !important; color: #0284c7 !important; margin-right: 0 !important; flex-shrink: 0 !important; display: inline-block !important; } /* 3. Botones de accion en la columna central (summary), alineados a la izquierda */ .single-product .summary .yith-wcwl-add-to-wishlist { margin: 16px 10px 8px 0 !important; display: inline-block !important; vertical-align: middle !important; } .single-product .summary .yith-wcwl-add-button a, .single-product .summary .yith-wcwl-wishlistaddedbrowse a, .single-product .summary .yith-wcwl-wishlistexistsbrowse a, .single-product .summary a.compare.link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 9px !important; padding: 9px 18px !important; font-family: 'Inter', sans-serif !important; font-size: 0.84rem !important; font-weight: 600 !important; color: #1e293b !important; background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; margin-right: 12px !important; margin-top: 10px !important; line-height: 1.3 !important; vertical-align: middle !important; } .single-product .summary .yith-wcwl-add-button a:hover, .single-product .summary .yith-wcwl-wishlistaddedbrowse a:hover, .single-product .summary .yith-wcwl-wishlistexistsbrowse a:hover, .single-product .summary a.compare.link:hover { background-color: #f0f9ff !important; border-color: #0284c7 !important; color: #0284c7 !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important; transform: translateY(-1px) !important; } .single-product .summary a.compare.link::before { font: normal normal normal 16px/1 font-electro !important; content: "\64" !important; color: #0284c7 !important; display: inline-block !important; margin-right: 0 !important; } .single-product .summary svg.yith-wcwl-icon-svg { width: 17px !important; height: 17px !important; color: #0284c7 !important; stroke: #0284c7 !important; stroke-width: 2 !important; flex-shrink: 0 !important; } /* ========================================================================== B2TECH: HOMOLOGACION DE BOTONES, DISPONIBILIDAD, STICKY SEARCH Y ACCESORIOS ========================================================================== */ /* 1. Homologar forma del boton Anadir al Carrito con los botones de Proyecto y Comparar */ .single-product .product-actions .cart button.single_add_to_cart_button, .single-product .product-actions button.single_add_to_cart_button { border-radius: 8px !important; padding: 12px 20px !important; font-size: 0.95rem !important; font-weight: 700 !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0.3px !important; box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2) !important; transition: all 0.2s ease !important; } .single-product .product-actions .cart button.single_add_to_cart_button:hover { border-radius: 8px !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3) !important; } /* 2. Eliminar la etiqueta 'Disponibilidad:' y mostrar badge limpio de stock */ .single-product .product-actions .availability { font-size: 0 !important; line-height: 1 !important; margin-bottom: 12px !important; color: transparent !important; } .single-product .product-actions .availability .electro-stock-availability, .single-product .product-actions .availability .stock { font-size: 0.88rem !important; line-height: 1.3 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 700 !important; color: #16a34a !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; padding: 3px 10px !important; border-radius: 6px !important; margin: 0 !important; } .single-product .product-actions .availability .stock::before { content: '●'; font-size: 11px; color: #16a34a; margin-right: 4px; } /* 3. Ocultar botones duplicados de Guardar en Proyecto y Comparar del summary central */ .single-product .summary > .yith-wcwl-add-to-wishlist, .single-product .summary > a.compare, .single-product .summary a.compare.link, .single-product .summary .yith-wcwl-add-to-wishlist:not(.product-actions .yith-wcwl-add-to-wishlist) { display: none !important; } /* 4. Barra de busqueda / cabecera flotante en scroll */ .site-header.header-v10 .stick-this { position: sticky !important; top: 0 !important; z-index: 99999 !important; background: #ffffff !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important; transition: box-shadow 0.2s ease, top 0.2s ease !important; } body.admin-bar .site-header.header-v10 .stick-this { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .site-header.header-v10 .stick-this { top: 46px !important; } } /* 5. Logo de b2Tech mas grande y prominente */ .header-v10 .header-logo-area { height: 52px !important; min-height: 52px !important; } .header-v10 .header-logo-area img.img-header-logo, .header-v10 .header-site-branding img.img-header-logo { max-height: 48px !important; height: 48px !important; width: auto !important; object-fit: contain !important; transition: all 0.2s ease !important; } /* 6. Diseno a doble linea para accesorios sugeridos */ .accessories .check-products { margin-top: 18px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .accessories .checkbox.accessory-checkbox.b2b-accessory-item { margin: 0 !important; padding: 10px 14px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; transition: all 0.15s ease !important; } .accessories .checkbox.accessory-checkbox.b2b-accessory-item:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } .accessories .accessory-label { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 !important; cursor: pointer !important; width: 100% !important; } .accessories .accessory-label input.product-check { margin-top: 5px !important; width: 17px !important; height: 17px !important; accent-color: #00759e !important; cursor: pointer !important; flex-shrink: 0 !important; } .accessories .accessory-details-wrap { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 1 auto !important; text-align: left !important; } .accessories .accessory-meta-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; line-height: 1.2 !important; } .accessories .accessory-main-badge { background: #071927 !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; padding: 2px 7px !important; border-radius: 4px !important; letter-spacing: 0.4px !important; } .accessories .accessory-brand { font-family: 'Inter', sans-serif !important; font-size: 0.76rem !important; font-weight: 700 !important; color: #00759e !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .accessories .accessory-model { font-family: 'Inter', sans-serif !important; font-size: 0.76rem !important; font-weight: 700 !important; color: #0f172a !important; background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; padding: 1px 6px !important; border-radius: 4px !important; letter-spacing: 0.4px !important; } .accessories .accessory-desc-row { font-family: 'Inter', sans-serif !important; font-size: 0.86rem !important; line-height: 1.4 !important; color: #334155 !important; } .accessories .accessory-title { font-weight: 500 !important; color: #1e293b !important; } .accessories .accessory-price-wrap, .accessories .accessory-price { font-weight: 700 !important; color: #dc2626 !important; margin-left: 6px !important; } .accessories .col-right .total-price { font-family: 'Inter', sans-serif !important; color: #0f172a !important; font-size: 0.95rem !important; font-weight: 600 !important; margin-bottom: 14px !important; } .accessories .col-right .total-price .total-price-html { display: block !important; font-size: 1.75rem !important; font-weight: 800 !important; color: #00759e !important; margin-bottom: 4px !important; } .accessories .col-right button.add-all-to-cart { border-radius: 8px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; padding: 11px 20px !important; background-color: #00759e !important; border-color: #00759e !important; box-shadow: 0 2px 6px rgba(0, 117, 158, 0.25) !important; transition: all 0.2s ease !important; } .accessories .col-right button.add-all-to-cart:hover { background-color: #0090c2 !important; border-color: #0090c2 !important; transform: translateY(-1px) !important; } /* ========================================================================== B2TECH: BARRA DE BUSQUEDA FLOTANTE FIJA EN SCROLL ========================================================================== */ .header-v10 .stick-this.stuck, .header-v10 .stick-this.b2tech-is-floating { padding-bottom: 0 !important; } .header-v10 .stick-this.b2tech-is-floating { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999999 !important; background: #ffffff !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12) !important; animation: b2techSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.admin-bar .header-v10 .stick-this.b2tech-is-floating { top: 32px !important; } @media (max-width: 782px) { body.admin-bar .header-v10 .stick-this.b2tech-is-floating { top: 46px !important; } } @keyframes b2techSlideDown { from { transform: translateY(-100%); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } } /* B2TECH_FIX_V2_START */ /* A. Badge de stock: un solo recuadro (el contenedor externo no lleva borde ni fondo) */ .single-product .product-actions .availability .electro-stock-availability { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; display: inline-block !important; } .single-product .product-actions .availability .electro-stock-availability p.stock, .single-product .product-actions .availability .electro-stock-availability .stock { margin: 0 !important; } /* B. Tarjetas de accesorios/relacionados: marca y modelo completos, sin recortes */ .single-product .loop-product-categories { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 6px !important; overflow: visible !important; height: auto !important; max-height: none !important; min-height: 24px !important; padding-top: 2px !important; margin-bottom: 6px !important; white-space: normal !important; position: relative !important; z-index: 2 !important; } .single-product .loop-product-categories .product-category-link, .single-product .loop-product-categories .product-category-link + .meta-sep, .single-product .loop-product-categories .product-brand-model + .meta-sep { display: none !important; } .single-product .loop-product-categories .product-brand-link, .single-product .loop-product-categories .product-brand-model { white-space: nowrap !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; } .single-product .products .product .product-loop-header, .single-product .products .product .product-inner, .single-product .tab-pane .products .product { overflow: visible !important; } /* B2TECH_FIX_V2_END */ /* B2TECH_COPY_V2_START */ /* Sin burbuja/tooltip ni escalado: solo se ilumina el recuadro del modelo */ .btn-copy-model .copy-tooltip { display: none !important; } .btn-copy-model:hover { transform: none !important; } .product-loop-footer .product-model-row, .product-model-code, .btn-copy-model { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease !important; } .product-loop-footer .product-model-row.copied { background: #dcfce7 !important; border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,.18) !important; } .product-loop-footer .product-model-row.copied .product-model-code, .product-model-row.copied .btn-copy-model { color: #15803d !important; } /* B2TECH_COPY_V2_END */ /* B2TECH_HOVER_FIX_START */ /* Evita que el hover de Electro desacomode la tarjeta (position:absolute + sombra): solo se eleva suavemente */ .products > .product:hover .product-inner, .products > .product.hover .product-inner, .owl-item > .product:hover .product-inner, .owl-item > .product.hover .product-inner, ul.products > li.product:hover .product-inner { position: relative !important; width: 100% !important; height: 100% !important; min-height: 0 !important; box-shadow: none !important; background-color: transparent !important; } .products > .product:hover .hover-area, .products > .product.hover .hover-area, .owl-item > .product:hover .hover-area { padding-top: 0 !important; border-top: 0 !important; } .products > .product:hover, .products > .product.hover { z-index: 2 !important; } .product-outer { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } /* B2TECH_HOVER_FIX_END */ /* B2TECH_CARD_ACTIONS_ROW_CSS_START */ /* ========================================================================== B2TECH: BADGE DE DISPONIBILIDAD A LA DERECHA Y BOTONES JUSTIFICADOS A LA IZQUIERDA ========================================================================== */ /* 1. Recuadro de disponibilidad en tarjetas de producto: justificado a la derecha */ .product-loop-footer .availability { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; margin: 4px 0 6px 0 !important; order: 3 !important; } /* Todo el boton verde: fondo verde solido, texto blanco, icono de cajita blanco */ .product-loop-footer .availability .stock, .product-loop-footer .availability .stock.in-stock { background: #16a34a !important; /* Verde solido corporativo */ color: #ffffff !important; /* Texto blanco nitido */ border: none !important; padding: 3px 10px !important; border-radius: 6px !important; font-size: 0.78rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 1px 4px rgba(22, 163, 74, 0.25) !important; } /* Icono de cajita blanco nitido */ .product-loop-footer .availability .stock::before, .product-loop-footer .availability .stock.in-stock::before { content: "" !important; display: inline-block !important; width: 14px !important; height: 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; flex-shrink: 0 !important; } /* Ocultar cualquier hover-area residual o wishlist duplicado fuera de nuestra fila */ .product-loop-footer > .yith-wcwl-add-to-wishlist:not(.b2tech-action-wishlist .yith-wcwl-add-to-wishlist), .product-loop-footer .hover-area { display: none !important; } /* 2. Contenedor de acciones: vertical (uno arriba del otro) */ .b2tech-card-actions-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px dashed #f1f5f9 !important; box-sizing: border-box !important; order: 4 !important; } /* Cada accion visible desde un inicio al 100% de ancho */ .b2tech-card-action.b2tech-action-wishlist, .b2tech-card-action.b2tech-action-compare { display: flex !important; width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* Contenedores internos de YITH */ .b2tech-action-wishlist .yith-wcwl-add-to-wishlist, .b2tech-action-wishlist .yith-wcwl-add-button, .b2tech-action-wishlist .yith-wcwl-wishlistaddedbrowse, .b2tech-action-wishlist .yith-wcwl-wishlistexistsbrowse { width: 100% !important; display: flex !important; margin: 0 !important; padding: 0 !important; } /* 3. Estilos de botones: texto justificado a la izquierda a una sola linea */ .b2tech-action-wishlist a.add_to_wishlist, .b2tech-action-wishlist .yith-wcwl-wishlistaddedbrowse a, .b2tech-action-wishlist .yith-wcwl-wishlistexistsbrowse a, .b2tech-action-compare a.add-to-compare-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; /* Justificado a la izquierda */ gap: 8px !important; width: 100% !important; min-height: 32px !important; padding: 5px 12px !important; /* Sangria comoda a la izquierda */ border-radius: 6px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #00759e !important; font-family: 'Inter', sans-serif !important; font-size: 0.77rem !important; font-weight: 600 !important; line-height: 1 !important; text-align: left !important; /* Texto alineado a la izquierda */ text-decoration: none !important; white-space: nowrap !important; transition: all 0.18s ease !important; box-sizing: border-box !important; } .b2tech-action-wishlist a:hover, .b2tech-action-compare a.add-to-compare-link:hover { background: #f0f9ff !important; border-color: #0284c7 !important; color: #0284c7 !important; transform: translateY(-1px) !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important; } .b2tech-action-wishlist svg.yith-wcwl-icon-svg { width: 14px !important; height: 14px !important; min-width: 14px !important; color: #00759e !important; stroke: #00759e !important; flex-shrink: 0 !important; } .b2tech-action-wishlist a:hover svg.yith-wcwl-icon-svg { color: #0284c7 !important; stroke: #0284c7 !important; } .b2tech-action-wishlist a span { display: inline !important; max-width: none !important; white-space: nowrap !important; text-align: left !important; } /* Icono y texto de Comparar a la izquierda */ .b2tech-action-compare a.add-to-compare-link { text-indent: 0 !important; white-space: nowrap !important; text-align: left !important; } .b2tech-action-compare a.add-to-compare-link::before { font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important; font-weight: 900 !important; content: "\f2f1" !important; font-size: 13px !important; line-height: 1 !important; color: #00759e !important; display: inline-block !important; flex-shrink: 0 !important; margin: 0 !important; } .b2tech-action-compare a.add-to-compare-link:hover::before { color: #0284c7 !important; } /* ========================================================================== B2TECH: EXPANSION FULL WIDTH PARA CATALOGO Y MARCAS (SIN ESPACIO LATERAL VACIO) ========================================================================== */ body.tax-product_brand #sidebar, body.tax-product_brand .sidebar, body.full-width #sidebar, body.full-width .sidebar { display: none !important; } body.tax-product_brand #primary, body.tax-product_brand .content-area, body.full-width #primary, body.full-width .content-area { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* B2TECH_CARD_ACTIONS_ROW_CSS_END */ /* B2TECH_COMPARE_LOADING_CSS_START */ .b2tech-action-compare a.add-to-compare-link.b2tech-btn-loading { opacity: 0.75 !important; pointer-events: none !important; background: #f1f5f9 !important; } .b2tech-action-compare a.add-to-compare-link.b2tech-btn-loading::before { content: "\f110" !important; /* FontAwesome spinner */ animation: b2tech-spin 0.9s infinite linear !important; color: #0284c7 !important; } @keyframes b2tech-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .b2tech-action-compare a.add-to-compare-link.added { background: #ecfdf5 !important; border-color: #86efac !important; color: #16a34a !important; } .b2tech-action-compare a.add-to-compare-link.added::before { content: "\f00c" !important; /* FontAwesome check */ color: #16a34a !important; } .b2tech-action-compare a.add-to-compare-link.added:hover { background: #dcfce7 !important; border-color: #4ade80 !important; color: #15803d !important; } /* B2TECH_COMPARE_LOADING_CSS_END */ /* B2TECH_COMPARE_LOADING_CSS_START */ .b2tech-action-compare a.add-to-compare-link.b2tech-btn-loading { opacity: 0.75 !important; pointer-events: none !important; background: #f1f5f9 !important; } .b2tech-action-compare a.add-to-compare-link.b2tech-btn-loading::before { content: "\f110" !important; /* FontAwesome spinner */ animation: b2tech-spin 0.9s infinite linear !important; color: #0284c7 !important; } @keyframes b2tech-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .b2tech-action-compare a.add-to-compare-link.added { background: #ecfdf5 !important; border-color: #86efac !important; color: #16a34a !important; } .b2tech-action-compare a.add-to-compare-link.added::before { content: "\f00c" !important; /* FontAwesome check */ color: #16a34a !important; } .b2tech-action-compare a.add-to-compare-link.added:hover { background: #dcfce7 !important; border-color: #4ade80 !important; color: #15803d !important; } /* B2TECH_COMPARE_LOADING_CSS_END */ /* B2TECH_COMPARE_POPUP_MODAL_CSS_START */ /* 1. Contenedor de fondo oscuro desenfocado */ .yith-woocompare-popup-container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.78) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; z-index: 999999 !important; display: flex; align-items: center !important; justify-content: center !important; padding: 16px !important; box-sizing: border-box !important; } .yith-woocompare-popup-container[style*="display: none"], .yith-woocompare-popup-container.b2tech-modal-closed { display: none !important; } /* 2. Caja modal moderna y compacta con auto-ajuste al contenido */ .yith-woocompare-popup-container .yith-woocompare-table-wrapper { position: relative !important; background: #ffffff !important; border-radius: 14px !important; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5) !important; width: fit-content !important; min-width: 580px !important; max-width: 94vw !important; max-height: 88vh !important; overflow-y: auto !important; overflow-x: auto !important; padding: 20px 24px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Scrollbars siempre visibles, estilizadas y de facil agarre */ .yith-woocompare-popup-container .yith-woocompare-table-wrapper::-webkit-scrollbar, .yith-woocompare-popup-container .dataTables_scrollBody::-webkit-scrollbar, .yith-woocompare-popup-container .DTFC_ScrollWrapper::-webkit-scrollbar, .yith-woocompare-popup-container .yith-woocompare-table-scroll-wrapper::-webkit-scrollbar { width: 10px !important; height: 10px !important; } .yith-woocompare-popup-container .yith-woocompare-table-wrapper::-webkit-scrollbar-track, .yith-woocompare-popup-container .dataTables_scrollBody::-webkit-scrollbar-track, .yith-woocompare-popup-container .DTFC_ScrollWrapper::-webkit-scrollbar-track, .yith-woocompare-popup-container .yith-woocompare-table-scroll-wrapper::-webkit-scrollbar-track { background: #e2e8f0 !important; border-radius: 6px !important; } .yith-woocompare-popup-container .yith-woocompare-table-wrapper::-webkit-scrollbar-thumb, .yith-woocompare-popup-container .dataTables_scrollBody::-webkit-scrollbar-thumb, .yith-woocompare-popup-container .DTFC_ScrollWrapper::-webkit-scrollbar-thumb, .yith-woocompare-popup-container .yith-woocompare-table-scroll-wrapper::-webkit-scrollbar-thumb { background: #0284c7 !important; border-radius: 6px !important; border: 2px solid #e2e8f0 !important; } .yith-woocompare-popup-container .yith-woocompare-table-wrapper::-webkit-scrollbar-thumb:hover, .yith-woocompare-popup-container .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: #0369a1 !important; } /* 3. Header bar y Toolbar del comparador */ .yith-woocompare-popup-container h2, #yith-woocompare h2 { display: none !important; } .b2tech-modal-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 12px !important; margin-bottom: 12px !important; border-bottom: 2px solid #f1f5f9 !important; margin-right: 0 !important; gap: 16px !important; } .b2tech-modal-title { font-size: 16.5px !important; font-weight: 700 !important; color: #0f172a !important; display: flex !important; align-items: center !important; gap: 8px !important; } .b2tech-modal-title i { color: #0284c7 !important; font-size: 18px !important; } .b2tech-modal-actions { display: flex !important; align-items: center !important; gap: 10px !important; } /* Botones de accion en la barra superior con ancho y alto homologados y orientados a la izquierda */ #b2tech-clear-compare-btn, .b2tech-clear-all-compare-btn, #b2tech-modal-close-toolbar-btn, .b2tech-modal-close-toolbar-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 195px !important; min-width: 195px !important; max-width: 195px !important; height: 38px !important; padding: 0 18px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; line-height: 1 !important; box-sizing: border-box !important; white-space: nowrap !important; text-align: left !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; } #b2tech-clear-compare-btn i, .b2tech-clear-all-compare-btn i, #b2tech-modal-close-toolbar-btn i, .b2tech-modal-close-toolbar-btn i { width: 16px !important; text-align: center !important; flex-shrink: 0 !important; display: inline-block !important; font-size: 13px !important; } /* Boton Vaciar Comparador: Fondo naranja suave y texto naranja oscuro */ #b2tech-clear-compare-btn, .b2tech-clear-all-compare-btn { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important; } #b2tech-clear-compare-btn i, .b2tech-clear-all-compare-btn i { color: #c2410c !important; } #b2tech-clear-compare-btn:hover, .b2tech-clear-all-compare-btn:hover { background: #ffedd5 !important; border-color: #fdba74 !important; color: #9a3412 !important; transform: translateY(-1px) !important; } /* Boton Cerrar: Fondo rojo suave y texto rojo oscuro */ #b2tech-modal-close-toolbar-btn, .b2tech-modal-close-toolbar-btn { background: #fff1f2 !important; color: #be123c !important; border: 1px solid #fecdd3 !important; } #b2tech-modal-close-toolbar-btn i, .b2tech-modal-close-toolbar-btn i { color: #be123c !important; } #b2tech-modal-close-toolbar-btn:hover, .b2tech-modal-close-toolbar-btn:hover { background: #ffe4e6 !important; border-color: #fda4af !important; color: #9f1239 !important; transform: translateY(-1px) !important; } /* Ocultar el boton de cruz flotante desfasado */ .yith-woocompare-popup-container .yith-woocompare-popup-close, .yith-woocompare-popup-container .close { display: none !important; } /* 3b. Estilo general de la tabla comparativa B2B */ .yith-woocompare-popup-container table.compare-list { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: #ffffff !important; } /* 4. Columna de etiquetas compacta (135px) y sin textos rotos */ .yith-woocompare-popup-container .yith-woocompare-table-wrapper table.compare-list th, .yith-woocompare-popup-container .yith-woocompare-table-wrapper table.compare-list tr th, .yith-woocompare-popup-container .yith-woocompare-table-wrapper th.fields, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftWrapper, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftWrapper th, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftWrapper table, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftHeadWrapper th, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftHeadWrapper, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftBodyWrapper, .yith-woocompare-popup-container .yith-woocompare-table-wrapper .DTFC_LeftBodyLiner { width: 135px !important; min-width: 135px !important; max-width: 135px !important; box-sizing: border-box !important; overflow: hidden !important; padding: 10px 12px !important; font-size: 12px !important; font-weight: 700 !important; color: #1e293b !important; background: #f8fafc !important; border-right: 1px solid #e2e8f0 !important; vertical-align: middle !important; text-align: left !important; line-height: 1.35 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } /* 4b. Ocultar completamente thead, tfoot, filas residuales, filler y contenedores vacios */ .yith-woocompare-popup-container table.compare-list thead, .yith-woocompare-popup-container .DTFC_LeftHeadWrapper, .yith-woocompare-popup-container table.compare-list tfoot, .yith-woocompare-popup-container .DTFC_LeftFootWrapper, .yith-woocompare-popup-container .dataTables_scrollHead, .yith-woocompare-popup-container .dataTables_scrollFoot, .yith-woocompare-popup-container table.compare-list tr.add_to_cart, .yith-woocompare-popup-container .DTFC_LeftWrapper tr.add_to_cart, .yith-woocompare-popup-container table.compare-list tr:has(th:empty):not(.product_info), .yith-woocompare-popup-container table.compare-list td.filler, .yith-woocompare-popup-container table.compare-list th.filler, .yith-woocompare-popup-container .DTFC_LeftWrapper .filler, .yith-woocompare-popup-container .filler { display: none !important; height: 0 !important; max-height: 0 !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden !important; } /* Suavizar todas las lineas de tabla a gris muy suave (#f1f5f9) y quitar linea final */ .yith-woocompare-popup-container table.compare-list th, .yith-woocompare-popup-container table.compare-list td, .yith-woocompare-popup-container .DTFC_LeftWrapper th, .yith-woocompare-popup-container .DTFC_LeftWrapper td { border-color: #f1f5f9 !important; border-width: 1px !important; } .yith-woocompare-popup-container table.compare-list tr.description th, .yith-woocompare-popup-container table.compare-list tr.description td, .yith-woocompare-popup-container table.compare-list tr:last-child th, .yith-woocompare-popup-container table.compare-list tr:last-child td, .yith-woocompare-popup-container .DTFC_LeftWrapper tr:last-child th { border-bottom: none !important; } /* Cabecera limpia 'Equipos' en la primera fila del cuerpo con tipografia homologada */ .yith-woocompare-popup-container table.compare-list tr.product_info th, .yith-woocompare-popup-container .DTFC_LeftWrapper tr.product_info th { font-size: 12px !important; font-weight: 700 !important; color: #1e293b !important; text-transform: none !important; letter-spacing: normal !important; padding: 12px 12px !important; background: #f8fafc !important; border-right: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; vertical-align: middle !important; text-align: left !important; } /* 5. Columnas de productos proporcionales y aprovechamiento total del espacio */ .yith-woocompare-popup-container table.compare-list td { min-width: 280px !important; max-width: 480px !important; padding: 12px 16px !important; vertical-align: top !important; border-bottom: 1px solid #f1f5f9 !important; border-right: 1px solid #f1f5f9 !important; box-sizing: border-box !important; background: #ffffff !important; } /* Imagen compacta */ .yith-woocompare-popup-container table.compare-list tr.image td, .yith-woocompare-popup-container table.compare-list tr.product_info td { text-align: center !important; padding: 10px 14px !important; } .yith-woocompare-popup-container table.compare-list tr.image img, .yith-woocompare-popup-container table.compare-list tr.product_info img { max-height: 85px !important; max-width: 110px !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: 0 auto 6px !important; display: block !important; } /* Titulo de producto claro y visible */ .yith-woocompare-popup-container table.compare-list .product-title, .yith-woocompare-popup-container table.compare-list tr.title td, .yith-woocompare-popup-container table.compare-list tr.product_info td h3, .yith-woocompare-popup-container table.compare-list tr.product_info td h4, .yith-woocompare-popup-container table.compare-list tr.product_info td .product_title { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #0f172a !important; text-align: center !important; margin: 6px 0 8px 0 !important; text-decoration: none !important; } /* Boton Agregar al Carrito por cada producto */ .yith-woocompare-popup-container .add-to-cart-wrap, .yith-woocompare-popup-container .add_to_cart_wrap { display: flex !important; justify-content: center !important; align-items: center !important; margin: 8px auto 4px auto !important; width: 100% !important; } .yith-woocompare-popup-container .add-to-cart-wrap a.button, .yith-woocompare-popup-container .add-to-cart-wrap .button, .yith-woocompare-popup-container .add_to_cart_wrap a.button, .yith-woocompare-popup-container .add_to_cart_wrap .button, .yith-woocompare-popup-container table.compare-list .button.add_to_cart_button, .yith-woocompare-popup-container table.compare-list a.button { width: auto !important; min-width: 145px !important; max-width: 220px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border-radius: 6px !important; background: #0284c7 !important; color: #ffffff !important; border: none !important; padding: 0 16px !important; margin: 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; position: relative !important; overflow: visible !important; text-indent: 0 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 36px !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.28) !important; transition: all 0.2s ease !important; float: none !important; white-space: nowrap !important; } .yith-woocompare-popup-container .add-to-cart-wrap a.button:hover, .yith-woocompare-popup-container .add-to-cart-wrap .button:hover, .yith-woocompare-popup-container .add_to_cart_wrap a.button:hover, .yith-woocompare-popup-container .add_to_cart_wrap .button:hover, .yith-woocompare-popup-container table.compare-list .button.add_to_cart_button:hover, .yith-woocompare-popup-container table.compare-list a.button:hover { background: #0369a1 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.38) !important; } /* Icono de carrito dentro del boton */ .yith-woocompare-popup-container .add-to-cart-wrap a.button::before, .yith-woocompare-popup-container .add-to-cart-wrap .button::before, .yith-woocompare-popup-container .add_to_cart_wrap a.button::before, .yith-woocompare-popup-container .add_to_cart_wrap .button::before, .yith-woocompare-popup-container table.compare-list .button.add_to_cart_button::before, .yith-woocompare-popup-container table.compare-list a.button::before { content: "\f217" !important; font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important; font-weight: 900 !important; font-size: 13px !important; color: #ffffff !important; background: transparent !important; position: static !important; margin-right: 6px !important; display: inline-block !important; line-height: 1 !important; } /* Estado al agregar (cargando o añadido) */ .yith-woocompare-popup-container .add-to-cart-wrap a.button.added, .yith-woocompare-popup-container .add_to_cart_wrap a.button.added { background: #16a34a !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.28) !important; } .yith-woocompare-popup-container .add-to-cart-wrap a.button.added::before, .yith-woocompare-popup-container .add_to_cart_wrap a.button.added::before { content: "\f00c" !important; } /* Fila de Categoria B2B con pills */ .b2tech-compare-cat-pill { display: inline-block !important; padding: 3px 8px !important; background: #eff6ff !important; color: #0284c7 !important; border-radius: 4px !important; font-size: 11.5px !important; font-weight: 600 !important; border: 1px solid #bfdbfe !important; line-height: 1.3 !important; } /* Precio B2B destacado */ .yith-woocompare-popup-container table.compare-list tr.price td, .yith-woocompare-popup-container table.compare-list tr.price .amount { font-size: 15px !important; font-weight: 700 !important; color: #0284c7 !important; } /* Modelo / SKU homologado */ .yith-woocompare-popup-container table.compare-list tr.sku td { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; font-family: inherit !important; } /* Disponibilidad verde homologada */ .yith-woocompare-popup-container table.compare-list tr.stock td { color: #16a34a !important; font-weight: 600 !important; font-size: 12px !important; } /* Descripcion alineada a la izquierda y legible */ .yith-woocompare-popup-container table.compare-list tr.description td { font-size: 12px !important; line-height: 1.45 !important; color: #475569 !important; text-align: left !important; max-height: 110px !important; overflow-y: auto !important; } /* 6. Indicador de scroll horizontal para 3 o mas productos */ .b2tech-scroll-indicator { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-top: 12px !important; padding: 6px 14px !important; background: #f8fafc !important; border: 1px dashed #cbd5e1 !important; border-radius: 6px !important; font-size: 11.5px !important; color: #64748b !important; font-weight: 600 !important; } .b2tech-scroll-indicator i { color: #0284c7 !important; } /* 7. Mensaje de estado vacio: nunca visible si hay productos en la tabla */ .yith-woocompare-popup-container .b2tech-compare-empty { text-align: center !important; padding: 40px 20px !important; } .yith-woocompare-table-wrapper:has(table.compare-list) .b2tech-compare-empty, .yith-woocompare-popup-container:has(table.compare-list) .b2tech-compare-empty { display: none !important; } .b2tech-compare-empty .b2tech-empty-icon { font-size: 42px !important; color: #94a3b8 !important; margin-bottom: 12px !important; } .b2tech-compare-empty h3 { font-size: 18px !important; font-weight: 700 !important; color: #1e293b !important; margin-bottom: 6px !important; } .b2tech-compare-empty p { font-size: 13px !important; color: #64748b !important; max-width: 420px !important; margin: 0 auto !important; } /* 8. Toast flotante de trabajo inmediato (Anti-spam / feedback al usuario) */ #b2tech-compare-toast { position: fixed !important; bottom: 28px !important; left: 50% !important; transform: translateX(-50%) translateY(20px) !important; background: rgba(15, 23, 42, 0.9) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: #ffffff !important; padding: 10px 20px !important; border-radius: 30px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; z-index: 9999999 !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important; opacity: 0 !important; pointer-events: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } #b2tech-compare-toast.b2tech-toast-active { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; } .b2tech-toast-spinner { display: inline-block !important; width: 14px !important; height: 14px !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-top-color: #38bdf8 !important; border-radius: 50% !important; animation: b2tech-spin 0.75s infinite linear !important; } .b2tech-toast-spinner.small { width: 11px !important; height: 11px !important; border-width: 1.5px !important; } @keyframes b2tech-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Boton en estado de trabajo en tarjeta */ .b2tech-action-compare a.b2tech-btn-working { opacity: 0.65 !important; cursor: wait !important; background: #f1f5f9 !important; border-color: #cbd5e1 !important; pointer-events: none !important; } /* B2TECH_COMPARE_POPUP_MODAL_CSS_END */ /* B2TECH_UNFREEZE_CARDS_CSS_START */ /* Evitar que las tarjetas de producto en el catalogo queden atenuadas o bloqueadas */ .product .blockUI.blockOverlay, .product-inner .blockUI.blockOverlay, .product-item-inner .blockUI.blockOverlay, .product-list-view-inner .blockUI.blockOverlay { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } .product, .product-inner, .product-item-inner, .product-list-view-inner { opacity: 1 !important; pointer-events: auto !important; } .product.js-blocked, .product-inner.js-blocked { opacity: 1 !important; } /* B2TECH_UNFREEZE_CARDS_CSS_END */ /* ========================================================================== B2TECH INSTITUTIONAL & LEGAL PAGES STYLING (B2B STANDARDS) ========================================================================== */ .page:has(.b2tech-legal-wrapper) .entry-header { display: none !important; } .b2tech-legal-wrapper { max-width: 1060px; margin: 24px auto 60px auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #334155; } .b2tech-legal-header-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius: 14px; padding: 36px 40px; color: #ffffff; margin-bottom: 28px; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15); position: relative; overflow: hidden; } .b2tech-legal-header-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .b2tech-legal-badge-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(14, 165, 233, 0.18); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; } .b2tech-legal-header-card h1 { font-family: 'Sarala', sans-serif !important; font-size: 32px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 12px 0 !important; line-height: 1.25 !important; } .b2tech-legal-header-desc { font-size: 15.5px; color: #94a3b8; line-height: 1.6; margin-bottom: 22px; max-width: 860px; } .b2tech-legal-meta-strip { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13.5px; color: #cbd5e1; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 18px; } .b2tech-legal-meta-strip span { display: inline-flex; align-items: center; gap: 7px; } .b2tech-legal-meta-strip i { color: #38bdf8; } /* Feature highlight cards */ .b2tech-legal-highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 28px; } .b2tech-legal-highlight-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .b2tech-legal-highlight-item:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); } .b2tech-legal-highlight-icon { width: 44px; height: 44px; border-radius: 10px; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; } .b2tech-legal-highlight-title { font-family: 'Sarala', sans-serif; font-size: 15.5px; font-weight: 700; color: #0f172a; margin-bottom: 6px; } .b2tech-legal-highlight-text { font-size: 13.5px; color: #64748b; line-height: 1.55; margin: 0; } /* Legal Card Sections */ .b2tech-legal-section { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 30px 36px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .b2tech-legal-section h2 { font-family: 'Sarala', sans-serif !important; font-size: 21px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 16px 0 !important; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 12px; } .b2tech-legal-section h2 i { color: #0284c7; font-size: 19px; } .b2tech-legal-section h3 { font-family: 'Sarala', sans-serif !important; font-size: 16.5px !important; font-weight: 700 !important; color: #1e293b !important; margin: 24px 0 10px 0 !important; } .b2tech-legal-section p { font-size: 15px; line-height: 1.75; color: #334155; margin-bottom: 14px; } .b2tech-legal-section ul, .b2tech-legal-section ol { margin: 12px 0 18px 24px; padding: 0; } .b2tech-legal-section li { font-size: 14.5px; line-height: 1.75; color: #334155; margin-bottom: 9px; } .b2tech-legal-section strong { color: #0f172a; } /* Callout Alerts */ .b2tech-legal-alert { border-radius: 10px; padding: 16px 22px; margin: 20px 0; display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; line-height: 1.6; } .b2tech-legal-alert i { font-size: 18px; margin-top: 3px; flex-shrink: 0; } .b2tech-legal-alert.alert-info { background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; } .b2tech-legal-alert.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } .b2tech-legal-alert.alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; } /* Tables */ .b2tech-legal-table-wrapper { overflow-x: auto; margin: 20px 0; border-radius: 10px; border: 1px solid #e2e8f0; } .b2tech-legal-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; } .b2tech-legal-table th { background: #f8fafc; color: #0f172a; font-weight: 600; padding: 13px 18px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; } .b2tech-legal-table td { padding: 13px 18px; border-bottom: 1px solid #f1f5f9; color: #334155; } .b2tech-legal-table tr:last-child td { border-bottom: none; } .b2tech-legal-table tr:hover td { background: #f8fafc; } /* Corporate Card Footer */ .b2tech-corporate-footer-card { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 26px 32px; margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .b2tech-corp-details h4 { font-family: 'Sarala', sans-serif !important; font-size: 17px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 6px 0 !important; } .b2tech-corp-details p { font-size: 13.5px; color: #64748b; margin: 0 0 4px 0; line-height: 1.55; } .b2tech-corp-contact-btn { display: inline-flex; align-items: center; gap: 8px; background: #0073aa; color: #ffffff !important; padding: 11px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none !important; transition: background 0.2s ease; } .b2tech-corp-contact-btn:hover { background: #005a87; color: #ffffff !important; } @media (max-width: 768px) { .b2tech-legal-header-card { padding: 24px 20px; } .b2tech-legal-header-card h1 { font-size: 24px !important; } .b2tech-legal-section { padding: 20px; } .b2tech-corporate-footer-card { flex-direction: column; align-items: flex-start; } } /* ========================================================================== B2TECH BOM & WISHLIST ADVANCED STYLING (B2B INTEGRATOR TOOLBAR) ========================================================================== */ /* Ocultar título por defecto en /wishlist/ si está nuestro hero */ .page-id-78 .entry-header, .page:has(.b2tech-bom-hero-wrapper) .entry-header { display: none !important; } .b2tech-bom-hero-wrapper { margin-bottom: 24px; } .b2tech-bom-hero-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius: 14px; padding: 32px 36px; color: #ffffff; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15); margin-bottom: 18px; position: relative; overflow: hidden; } .b2tech-bom-hero-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .b2tech-bom-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(14, 165, 233, 0.18); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; } .b2tech-bom-hero-title { font-family: 'Sarala', sans-serif !important; font-size: 30px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px 0 !important; line-height: 1.25 !important; } .b2tech-bom-hero-desc { font-size: 15px; color: #94a3b8; line-height: 1.6; margin-bottom: 18px; max-width: 840px; } .b2tech-bom-meta-strip { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: #cbd5e1; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; } .b2tech-bom-meta-strip span { display: inline-flex; align-items: center; gap: 7px; } .b2tech-bom-meta-strip i { color: #38bdf8; } /* Toolbar de Acciones B2B */ .b2tech-bom-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); margin-bottom: 24px; } .b2tech-bom-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 8px !important; font-family: 'Sarala', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.2s ease !important; line-height: 1 !important; border: 1px solid transparent !important; box-sizing: border-box !important; } .b2tech-bom-btn-rfq { background: #0073aa !important; color: #ffffff !important; border-color: #0073aa !important; box-shadow: 0 4px 10px rgba(0, 115, 170, 0.2) !important; } .b2tech-bom-btn-rfq:hover { background: #005a87 !important; border-color: #005a87 !important; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 115, 170, 0.3) !important; } .b2tech-bom-btn-excel { background: #ecfdf5 !important; color: #059669 !important; border-color: #a7f3d0 !important; } .b2tech-bom-btn-excel:hover { background: #059669 !important; color: #ffffff !important; border-color: #059669 !important; transform: translateY(-1px); } .b2tech-bom-btn-print { background: #f8fafc !important; color: #334155 !important; border-color: #cbd5e1 !important; } .b2tech-bom-btn-print:hover { background: #e2e8f0 !important; color: #0f172a !important; border-color: #94a3b8 !important; transform: translateY(-1px); } .b2tech-bom-btn-clear { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; margin-left: auto !important; } .b2tech-bom-btn-clear:hover { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; } /* Tabla de Wishlist B2B */ .wishlist_table.traditional { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important; } .wishlist_table th { background: #f8fafc !important; color: #0f172a !important; font-family: 'Sarala', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 14px 18px !important; border-bottom: 2px solid #e2e8f0 !important; } .wishlist_table td { padding: 16px 18px !important; border-bottom: 1px solid #f1f5f9 !important; vertical-align: middle !important; } .wishlist_table tr:last-child td { border-bottom: none !important; } .wishlist_table .product-name a { font-family: 'Sarala', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.4 !important; text-decoration: none !important; transition: color 0.15s ease !important; } .wishlist_table .product-name a:hover { color: #0073aa !important; } .wishlist_table .product-price { font-size: 16px !important; font-weight: 700 !important; color: #0073aa !important; } .wishlist_table .wishlist-in-stock { display: inline-block; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } .wishlist_table .wishlist-out-of-stock { display: inline-block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } /* Botón Añadir al carrito dentro de la tabla */ .wishlist_table .product-add-to-cart a.button.add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #0073aa !important; color: #ffffff !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.2s ease !important; border: none !important; white-space: nowrap !important; } .wishlist_table .product-add-to-cart a.button.add_to_cart_button:hover { background: #005a87 !important; transform: translateY(-1px); } /* Resumen Financiero de Inversión BOM */ .b2tech-bom-summary-wrapper { margin-top: 24px; margin-bottom: 40px; } .b2tech-bom-summary-card { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 14px; padding: 24px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .b2tech-bom-summary-details { flex: 1; min-width: 280px; } .b2tech-bom-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #475569; border-bottom: 1px dashed #e2e8f0; } .b2tech-bom-summary-row.b2tech-bom-summary-total { border-bottom: none; border-top: 2px solid #cbd5e1; margin-top: 8px; padding-top: 10px; font-size: 17px; font-weight: 700; color: #0f172a; } .b2tech-bom-summary-row .total-amount { color: #0073aa; font-size: 22px; } .b2tech-bom-disclaimer { font-size: 12.5px; color: #64748b; margin: 10px 0 0 0; line-height: 1.5; } .b2tech-bom-btn-rfq-large { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px 28px !important; background: #0073aa !important; color: #ffffff !important; border-radius: 10px !important; font-family: 'Sarala', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.2s ease !important; border: none !important; box-shadow: 0 4px 12px rgba(0, 115, 170, 0.25) !important; } .b2tech-bom-btn-rfq-large:hover { background: #005a87 !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 115, 170, 0.35) !important; } /* Homologación de Botones en Ficha de Producto Individual */ .b2tech-single-actions-wrapper { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .b2tech-btn-single-rfq { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; width: 100% !important; height: 42px; background: #fff7ed !important; color: #c2410c !important; border: 1.5px solid #fed7aa !important; border-radius: 8px !important; font-family: 'Sarala', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.2s ease !important; box-sizing: border-box !important; } .b2tech-btn-single-rfq:hover { background: #ea580c !important; color: #ffffff !important; border-color: #ea580c !important; } .b2tech-single-subactions-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } .b2tech-subaction-item { width: 100% !important; } .b2tech-subaction-item .yith-wcwl-add-to-wishlist, .b2tech-subaction-item .yith-wcwl-add-button, .b2tech-subaction-item .add_to_wishlist, .b2tech-subaction-item .add-to-compare-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; height: 40px !important; background: #f8fafc !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; box-sizing: border-box !important; padding: 0 10px !important; white-space: nowrap !important; } .b2tech-subaction-item .add_to_wishlist:hover, .b2tech-subaction-item .add-to-compare-link:hover { background: #f1f5f9 !important; color: #0073aa !important; border-color: #94a3b8 !important; } /* Estilos de Impresión / Ficha Técnica PDF */ @media print { header, footer, .top-bar, .header-v10, .b2tech-bom-toolbar, .product-remove, .product-add-to-cart, .whatsapp-btn, #wpadminbar, .footer-widgets, .b2tech-bom-summary-action { display: none !important; } body { background: #ffffff !important; color: #000000 !important; font-size: 11pt !important; } .b2tech-bom-hero-card { background: #f8fafc !important; color: #000000 !important; border: 2px solid #000000 !important; box-shadow: none !important; padding: 15px !important; } .b2tech-bom-hero-title { color: #000000 !important; font-size: 18pt !important; } .b2tech-bom-hero-desc, .b2tech-bom-meta-strip { color: #333333 !important; } .wishlist_table { border: 1px solid #000000 !important; width: 100% !important; } .wishlist_table th, .wishlist_table td { border: 1px solid #cccccc !important; color: #000000 !important; } .b2tech-bom-summary-card { border: 2px solid #000000 !important; background: #ffffff !important; } } /* ========================================================================== B2TECH COMPACT INTEGRATED PROJECT LIST & BOM (BILL OF MATERIALS) ========================================================================== */ /* Ocultar encabezados redundantes de la página */ .page-id-78 .entry-header, .page:has(.b2tech-bom-compact-card) .entry-header, .page:has(.b2tech-bom-hero-wrapper) .entry-header { display: none !important; } /* Ocultar el viejo hero card grande si estuviera en caché */ .b2tech-bom-hero-wrapper, .b2tech-bom-hero-card { display: none !important; } /* Contenedor principal integrado y ultra-compacto */ .b2tech-bom-compact-card { background: linear-gradient(135deg, #071927 0%, #0d2838 100%) !important; border: 1px solid rgba(14, 165, 233, 0.25) !important; border-radius: 10px !important; padding: 14px 20px !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(7, 25, 39, 0.1) !important; margin: 10px 0 16px 0 !important; position: relative !important; } .b2tech-bom-compact-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; } .b2tech-bom-compact-left { display: flex !important; flex-direction: column !important; gap: 4px !important; } /* Badge mini corporativo */ .b2tech-bom-badge-mini { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(10, 108, 140, 0.4) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; padding: 2px 9px !important; border-radius: 12px !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; width: fit-content !important; } /* Reseteo completo de estilos de Electro en wishlist-fragment */ .wishlist-fragment .wishlist-title-container { text-align: left !important; margin: 0 !important; padding: 0 !important; } .wishlist-fragment .wishlist-title, .b2tech-bom-compact-card .wishlist-title { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; } .wishlist-fragment .wishlist-title[style*="none"], .b2tech-bom-compact-card .wishlist-title[style*="none"] { display: none !important; } .wishlist-fragment .wishlist-title h2, .b2tech-bom-compact-card h2.b2tech-project-title { font-family: 'Sarala', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; padding: 0 !important; line-height: 1.25 !important; display: inline-block !important; } /* Botón Editar Título: compacto y alineado al título */ .wishlist-fragment a.show-title-form, .wishlist-title a.show-title-form, .b2tech-btn-edit-title { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(255, 255, 255, 0.12) !important; color: #cbd5e1 !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; padding: 3px 10px !important; border-radius: 5px !important; font-size: 11.5px !important; font-weight: 600 !important; height: auto !important; width: auto !important; line-height: 1.2 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.2s ease !important; margin: 0 0 0 6px !important; } .wishlist-fragment a.show-title-form:hover, .b2tech-btn-edit-title:hover { background: rgba(10, 108, 140, 0.6) !important; color: #ffffff !important; border-color: #38bdf8 !important; } .wishlist-fragment a.show-title-form svg, .wishlist-title a.show-title-form svg { display: none !important; } /* Formulario inline de edición: oculto por defecto */ .wishlist-fragment .hidden-title-form, .b2tech-inline-title-form { display: none; margin: 0 !important; padding: 0 !important; background: transparent !important; } .wishlist-fragment .hidden-title-form.active, .wishlist-fragment .hidden-title-form[style*="inline"], .wishlist-fragment .hidden-title-form[style*="block"], .wishlist-fragment .hidden-title-form[style*="flex"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .wishlist-fragment .hidden-title-form[style*="none"] { display: none !important; } .wishlist-fragment .hidden-title-form > input, .b2tech-title-input { background: #ffffff !important; color: #071927 !important; border: 1px solid #38bdf8 !important; border-radius: 6px !important; padding: 6px 12px !important; font-size: 13.5px !important; font-weight: 600 !important; min-width: 250px !important; height: 34px !important; box-sizing: border-box !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important; margin: 0 !important; } .wishlist-fragment .hidden-title-form > input:focus { outline: none !important; border-color: #0A6C8C !important; box-shadow: 0 0 0 3px rgba(10, 108, 140, 0.35) !important; } /* Contenedor de botones homologados */ .wishlist-fragment .hidden-title-form .edit-title-buttons, .b2tech-title-buttons { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* HOMOLOGACIÓN BOTÓN GUARDAR (Verde con icono FontAwesome y texto) */ .wishlist-fragment .hidden-title-form .save-title-form, a.save-title-form, .b2tech-btn-title-save { height: 34px !important; width: auto !important; border-radius: 6px !important; padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; text-decoration: none !important; cursor: pointer !important; line-height: 1 !important; background: #10b981 !important; border: 1px solid #059669 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important; transition: all 0.15s ease !important; } .wishlist-fragment .hidden-title-form .save-title-form:hover, a.save-title-form:hover, .b2tech-btn-title-save:hover { background: #059669 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.5) !important; } /* HOMOLOGACIÓN BOTÓN CANCELAR (Rojo con icono FontAwesome y texto) */ .wishlist-fragment .hidden-title-form .hide-title-form, a.hide-title-form, .b2tech-btn-title-cancel { height: 34px !important; width: auto !important; border-radius: 6px !important; padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; text-decoration: none !important; cursor: pointer !important; line-height: 1 !important; background: #ef4444 !important; border: 1px solid #dc2626 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important; transition: all 0.15s ease !important; } .wishlist-fragment .hidden-title-form .hide-title-form:hover, a.hide-title-form:hover, .b2tech-btn-title-cancel:hover { background: #dc2626 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.45) !important; } /* Ocultar SVG residuales de YITH */ .wishlist-fragment .hidden-title-form .save-title-form svg, .wishlist-fragment .hidden-title-form .hide-title-form svg { display: none !important; } /* Metadatos rápidos a la derecha */ .b2tech-bom-quick-meta { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; color: #cbd5e1 !important; } .b2tech-bom-quick-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(255, 255, 255, 0.08) !important; padding: 3px 9px !important; border-radius: 5px !important; } .b2tech-bom-quick-meta span i { color: #38bdf8 !important; } .b2tech-bom-quick-meta .b2tech-chip-warranty i { color: #10b981 !important; } /* Toolbar Compacta */ .b2tech-bom-toolbar-compact { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn { padding: 6px 14px !important; font-size: 12.5px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.15s ease !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-rfq { background: linear-gradient(135deg, #0A6C8C 0%, #088395 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(10, 108, 140, 0.35) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-rfq:hover { background: linear-gradient(135deg, #088395 0%, #0A6C8C 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(10, 108, 140, 0.5) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-excel { background: #065f46 !important; color: #ffffff !important; border: 1px solid #047857 !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-excel:hover { background: #047857 !important; transform: translateY(-1px) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-print { background: #334155 !important; color: #ffffff !important; border: 1px solid #475569 !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-print:hover { background: #475569 !important; transform: translateY(-1px) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-clear { background: transparent !important; color: #f87171 !important; border: 1px solid rgba(248, 113, 113, 0.35) !important; } .b2tech-bom-toolbar-compact .b2tech-bom-btn-clear:hover { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; } /* Ajuste de márgenes superiores de la tabla para que suba y sea visible inmediatamente */ .woocommerce form#yith-wcwl-form .wishlist_table { margin-top: 10px !important; } /* ========================================================================== FORMATO MEMBRETADO OFICIAL PARA IMPRESIÓN / PDF (PÁGINA COMPLETA B2B) ========================================================================== */ /* En pantalla normal, los bloques de membrete están ocultos */ .b2tech-print-letterhead, .b2tech-print-footer-container { display: none !important; } @media print { @page { size: letter portrait; margin: 12mm 10mm 12mm 10mm; } /* Reset global de impresión */ html, body { background: #ffffff !important; color: #0f172a !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 9.5pt !important; line-height: 1.35 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Ocultar elementos irrelevantes de navegación y web */ .back-to-top-wrapper, #off-canvas-cart-summary, .electro-overlay, .joinchat, #scrollUp, .scrollup, a#scrollUp, .scroll-to-top, .back-to-top, #top-bar, .top-bar, .site-header, #masthead, #colophon, .header-v10, .header-v1, .site-branding, .navigation-top, .navbar, .header-logo-area, .woocommerce-breadcrumb, .breadcrumb, .b2tech-bom-compact-card, .b2tech-bom-toolbar-compact, .show-title-form, .b2tech-btn-edit-title, .hidden-title-form, .edit-title-buttons, .yith_wcwl_wishlist_footer, .yith_wcwl_wishlist_bulk_action, .yith_wcwl_wishlist_update, .yith-wcwl-share, .share-icons, .product-remove, th.product-remove, td.product-remove, .product-checkbox, th.product-checkbox, td.product-checkbox, .product-add-to-cart, th.product-add-to-cart, td.product-add-to-cart, .b2tech-whatsapp-float, #whatsapp-button, .joinchat, .wa-float, .site-footer, footer, #footer, .deal-products-carousel, .recent-products, .owl-nav, .owl-dots, .slick-arrow, .entry-header { display: none !important; } /* Forzar contenedor al 100% del ancho del papel sin márgenes restrictivos */ .site-content, .site-content .container, .site-content .row, .content-area, #primary, .site-main, .entry-content, form#yith-wcwl-form, .wishlist-fragment { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; float: none !important; } /* Mostrar bloques de membrete */ .b2tech-print-letterhead, .b2tech-print-footer-container { display: block !important; } /* ENCABEZADO MEMBRETADO */ .b2tech-print-letterhead { border-bottom: 2px solid #071927 !important; padding-bottom: 8px !important; margin-bottom: 12px !important; page-break-inside: avoid !important; } .b2tech-pl-header-grid { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 16px !important; } .b2tech-pl-company { display: flex !important; align-items: center !important; gap: 14px !important; flex: 1 !important; } .b2tech-pl-logo { height: 50px !important; width: auto !important; object-fit: contain !important; } .b2tech-pl-cname { font-family: 'Sarala', sans-serif !important; font-size: 11pt !important; font-weight: 700 !important; color: #071927 !important; letter-spacing: 0.3px !important; line-height: 1.2 !important; } .b2tech-pl-csub { font-size: 8pt !important; color: #0A6C8C !important; font-weight: 600 !important; margin-bottom: 3px !important; } .b2tech-pl-ccontact { font-size: 7.5pt !important; color: #475569 !important; display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } /* Tarjeta de Folio */ .b2tech-pl-doc-card { border: 1.5px solid #0A6C8C !important; border-radius: 6px !important; padding: 6px 12px !important; background: #f8fafc !important; min-width: 220px !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .b2tech-pl-doc-badge { font-size: 7pt !important; font-weight: 700 !important; color: #0A6C8C !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: center !important; border-bottom: 1px solid #e2e8f0 !important; padding-bottom: 2px !important; margin-bottom: 4px !important; } .b2tech-pl-doc-title { font-size: 9.5pt !important; font-weight: 800 !important; color: #071927 !important; text-align: center !important; margin-bottom: 4px !important; } .b2tech-pl-meta-table { width: 100% !important; border-collapse: collapse !important; font-size: 7.5pt !important; } .b2tech-pl-meta-table td { padding: 1px 2px !important; border: none !important; } .b2tech-pl-meta-table td.m-lbl { color: #64748b !important; font-weight: 600 !important; width: 60px !important; } .b2tech-pl-meta-table td.m-val { color: #0f172a !important; font-weight: 700 !important; text-align: right !important; } /* Franja de Proyecto */ .b2tech-pl-project-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; background: #071927 !important; color: #ffffff !important; padding: 5px 12px !important; border-radius: 4px !important; margin-top: 8px !important; font-size: 8pt !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .b2tech-pl-pcell { display: flex !important; align-items: center !important; gap: 6px !important; } .b2tech-pl-pcell .pl-tag { color: #38bdf8 !important; font-weight: 700 !important; font-size: 7.5pt !important; } .b2tech-pl-pcell .pl-title { color: #ffffff !important; font-weight: 700 !important; } .b2tech-pl-pcell .pl-badge { background: rgba(255, 255, 255, 0.15) !important; padding: 1px 7px !important; border-radius: 8px !important; font-size: 7pt !important; } /* TABLA DE PRODUCTOS A TODA LA PÁGINA */ table.shop_table.wishlist_table { display: table !important; width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; margin: 10px 0 !important; table-layout: fixed !important; border: 1.5px solid #071927 !important; page-break-inside: auto !important; counter-reset: bom-item !important; } table.shop_table.wishlist_table thead { display: table-header-group !important; } table.shop_table.wishlist_table tr { page-break-inside: avoid !important; page-break-after: auto !important; } table.shop_table.wishlist_table thead th { background-color: #071927 !important; color: #ffffff !important; font-size: 8.5pt !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 8px 10px !important; border: 1px solid #071927 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } table.shop_table.wishlist_table thead th.product-thumbnail { width: 65px !important; text-align: center !important; } table.shop_table.wishlist_table thead th.product-thumbnail::after { content: "#" !important; display: inline-block !important; } table.shop_table.wishlist_table thead th.product-name { width: auto !important; text-align: left !important; } table.shop_table.wishlist_table thead th.product-price { width: 140px !important; text-align: right !important; } table.shop_table.wishlist_table thead th.product-stock-status { width: 120px !important; text-align: center !important; } table.shop_table.wishlist_table tbody td { padding: 8px 10px !important; border: 1px solid #cbd5e1 !important; font-size: 8.5pt !important; vertical-align: middle !important; background: #ffffff !important; color: #0f172a !important; } table.shop_table.wishlist_table tbody td.product-thumbnail { text-align: center !important; } table.shop_table.wishlist_table tbody td.product-thumbnail::before { counter-increment: bom-item !important; content: counter(bom-item) !important; display: block !important; font-weight: 700 !important; font-size: 9pt !important; color: #071927 !important; margin-bottom: 2px !important; } table.shop_table.wishlist_table tbody td.product-thumbnail img { width: 48px !important; height: 48px !important; object-fit: contain !important; border: 1px solid #e2e8f0 !important; border-radius: 4px !important; padding: 2px !important; display: inline-block !important; } table.shop_table.wishlist_table tbody td.product-name { text-align: left !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.35 !important; } table.shop_table.wishlist_table tbody td.product-name a { color: #0f172a !important; text-decoration: none !important; font-size: 9pt !important; display: block !important; } table.shop_table.wishlist_table tbody td.product-price { text-align: right !important; font-weight: 700 !important; color: #0A6C8C !important; font-size: 9.5pt !important; white-space: nowrap !important; } table.shop_table.wishlist_table tbody td.product-stock-status { text-align: center !important; } table.shop_table.wishlist_table tbody td.product-stock-status .wishlist-in-stock, table.shop_table.wishlist_table tbody td.product-stock-status span { color: #065f46 !important; font-weight: 600 !important; font-size: 8pt !important; background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; padding: 2px 6px !important; border-radius: 4px !important; display: inline-block !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* RESUMEN ECONÓMICO (TOTALES) */ .b2tech-print-summary-box { display: flex !important; justify-content: flex-end !important; margin: 10px 0 14px 0 !important; page-break-inside: avoid !important; } .b2tech-print-totals-table { width: 320px !important; border-collapse: collapse !important; border: 1.5px solid #071927 !important; font-size: 8.5pt !important; background: #f8fafc !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .b2tech-print-totals-table td { padding: 5px 10px !important; border-bottom: 1px solid #e2e8f0 !important; } .b2tech-print-totals-table td.t-lbl { color: #475569 !important; font-weight: 600 !important; text-align: left !important; } .b2tech-print-totals-table td.t-val { color: #0f172a !important; font-weight: 700 !important; text-align: right !important; } .b2tech-print-totals-table tr.t-total-row td { background: #071927 !important; color: #ffffff !important; font-size: 9.5pt !important; font-weight: 800 !important; border-bottom: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .b2tech-print-totals-table tr.t-total-row td.t-val { color: #38bdf8 !important; } /* PIE MEMBRETADO Y CONDICIONES */ .b2tech-print-footer { border-top: 1.5px solid #071927 !important; padding-top: 8px !important; margin-top: 8px !important; page-break-inside: avoid !important; } .b2tech-pf-title { font-size: 8pt !important; font-weight: 800 !important; color: #071927 !important; text-transform: uppercase !important; margin-bottom: 4px !important; letter-spacing: 0.3px !important; } .b2tech-pf-list { font-size: 7pt !important; color: #475569 !important; margin: 0 0 16px 16px !important; padding: 0 !important; line-height: 1.4 !important; } .b2tech-pf-list li { margin-bottom: 2px !important; } .b2tech-pf-signatures { display: flex !important; justify-content: space-around !important; margin: 28px 0 16px 0 !important; page-break-inside: avoid !important; } .b2tech-pf-sig-col { text-align: center !important; width: 250px !important; } .b2tech-pf-sig-col .sig-line { border-top: 1px solid #0f172a !important; margin-bottom: 4px !important; } .b2tech-pf-sig-col .sig-name { font-size: 8pt !important; font-weight: 700 !important; color: #071927 !important; } .b2tech-pf-sig-col .sig-role { font-size: 7pt !important; color: #64748b !important; } .b2tech-pf-watermark { border-top: 1px solid #e2e8f0 !important; padding-top: 6px !important; display: flex !important; justify-content: space-between !important; font-size: 6.5pt !important; color: #94a3b8 !important; } } /* ========================================================================== B2TECH RFQ SUBMIT BUTTON - HIGH EMPHASIS CTA ========================================================================== */ .b2tech-quote-submit-wrapper { margin-top: 36px !important; padding-top: 28px !important; border-top: 1px solid #e2e8f0 !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } button.addify_checkout_place_quote, .b2tech-quote-page-wrapper button.addify_checkout_place_quote, .woocommerce button.addify_checkout_place_quote { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; background: linear-gradient(135deg, #071927 0%, #0A6C8C 45%, #088395 100%) !important; color: #ffffff !important; font-family: 'Sarala', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: none !important; padding: 16px 44px !important; min-height: 56px !important; min-width: 360px !important; border-radius: 50px !important; border: 1.5px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 24px rgba(10, 108, 140, 0.38), 0 2px 6px rgba(7, 25, 39, 0.2) !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important; position: relative !important; overflow: hidden !important; margin: 0 auto !important; } button.addify_checkout_place_quote::before, .b2tech-quote-page-wrapper button.addify_checkout_place_quote::before, .woocommerce button.addify_checkout_place_quote::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important; transform: skewX(-25deg) !important; transition: left 0.75s ease !important; } button.addify_checkout_place_quote:hover::before, .b2tech-quote-page-wrapper button.addify_checkout_place_quote:hover::before, .woocommerce button.addify_checkout_place_quote:hover::before { left: 140% !important; } button.addify_checkout_place_quote:hover, .b2tech-quote-page-wrapper button.addify_checkout_place_quote:hover, .woocommerce button.addify_checkout_place_quote:hover { background: linear-gradient(135deg, #0A6C8C 0%, #088395 50%, #0284c7 100%) !important; color: #ffffff !important; transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 12px 32px rgba(10, 108, 140, 0.52), 0 4px 10px rgba(7, 25, 39, 0.25) !important; border-color: rgba(255, 255, 255, 0.6) !important; } button.addify_checkout_place_quote:active, .b2tech-quote-page-wrapper button.addify_checkout_place_quote:active, .woocommerce button.addify_checkout_place_quote:active { transform: translateY(1px) scale(0.99) !important; box-shadow: 0 4px 12px rgba(10, 108, 140, 0.35) !important; } button.addify_checkout_place_quote i, .b2tech-quote-page-wrapper button.addify_checkout_place_quote i, .woocommerce button.addify_checkout_place_quote i { font-size: 18px !important; color: #ffffff !important; transition: transform 0.25s ease !important; } button.addify_checkout_place_quote:hover i, .b2tech-quote-page-wrapper button.addify_checkout_place_quote:hover i, .woocommerce button.addify_checkout_place_quote:hover i { transform: translateX(5px) translateY(-1px) rotate(-10deg) !important; } .b2tech-rfq-submit-guarantee { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 20px !important; margin-top: 16px !important; font-size: 13px !important; color: #64748b !important; line-height: 1.4 !important; } .b2tech-rfq-submit-guarantee span { display: inline-flex !important; align-items: center !important; gap: 7px !important; } .b2tech-rfq-submit-guarantee i { color: #0A6C8C !important; font-size: 14px !important; } @media (max-width: 768px) { button.addify_checkout_place_quote, .b2tech-quote-page-wrapper button.addify_checkout_place_quote, .woocommerce button.addify_checkout_place_quote { width: 100% !important; min-width: 100% !important; padding: 15px 20px !important; font-size: 15px !important; } .b2tech-rfq-submit-guarantee { flex-direction: column !important; gap: 8px !important; font-size: 12px !important; } } /* ========================================================================== B2Tech / Terian - Card Price Masking & Equal-Sized Action Buttons Grid ========================================================================== */ .shop-control-bar { margin-bottom: 30px !important; } ul.products { margin-top: 14px !important; } .price-add-to-cart { display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; margin: 10px 0 !important; } .price-add-to-cart .price { flex: 1 1 50% !important; max-width: calc(50% - 4px) !important; display: flex !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; line-height: normal !important; } .price-add-to-cart .price .tcvp-price-expired-badge { flex: 1 1 100% !important; width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 6px 8px !important; min-height: 48px !important; height: 100% !important; box-sizing: border-box !important; border-radius: 6px !important; background: #fff8e1 !important; border: 1px solid #ffe082 !important; color: #92400e !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } .price-add-to-cart .price .tcvp-price-expired-badge i, .price-add-to-cart .price .tcvp-price-expired-badge .fas { font-size: 13px !important; color: #d97706 !important; margin-right: 5px !important; flex-shrink: 0 !important; } .price-add-to-cart a.button.tcvp-loop-quote-btn, .price-add-to-cart a.tcvp-loop-quote-btn { flex: 1 1 50% !important; max-width: calc(50% - 4px) !important; width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 6px 8px !important; min-height: 48px !important; height: 100% !important; box-sizing: border-box !important; border-radius: 6px !important; background: #00c853 !important; border: 1px solid #00c853 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; transition: all 0.2s ease !important; text-decoration: none !important; white-space: normal !important; box-shadow: 0 1px 3px rgba(0, 200, 83, 0.2) !important; } .price-add-to-cart a.button.tcvp-loop-quote-btn:hover, .price-add-to-cart a.tcvp-loop-quote-btn:hover { background: #009624 !important; border-color: #009624 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0, 200, 83, 0.3) !important; } .price-add-to-cart a.button.tcvp-loop-quote-btn i, .price-add-to-cart a.tcvp-loop-quote-btn i { font-size: 14px !important; margin-right: 5px !important; flex-shrink: 0 !important; } /* Hide automated taxonomy/term descriptions (e.g. Categoría creada para la marca ...) */ .term-description, .taxonomy-description { display: none !important; } /* ========================================================================== B2TECH: Formato Cuadro de Botones y Disponibilidad (Single Product Actions) ========================================================================== */ /* 1. Contenedor del cuadro de acciones */ .single-product-wrapper .product-actions-wrapper > .product-actions, .single-product .product-actions-wrapper > .product-actions, .single-product .product-actions { border: 1.5px solid #e2e8f0 !important; border-radius: 16px !important; padding: 20px !important; background: #ffffff !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; box-sizing: border-box !important; } /* 2. Badge verde de disponibilidad: justificado a la izquierda y sin línea debajo */ .single-product-wrapper .product-actions-wrapper .product-actions div.availability, .single-product-wrapper .product-actions div.availability, .single-product .product-actions-wrapper .product-actions .availability, .single-product .product-actions .availability, div.availability { border: none !important; border-bottom: 0 !important; border-bottom-width: 0 !important; border-bottom-style: none !important; border-bottom-color: transparent !important; padding: 0 !important; padding-bottom: 0 !important; margin: 0 0 4px 0 !important; text-align: left !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; width: 100% !important; font-size: 0 !important; line-height: 1 !important; color: transparent !important; } .single-product .product-actions .availability .electro-stock-availability { display: inline-flex !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } .single-product .product-actions .availability .electro-stock-availability p.stock, .single-product .product-actions .availability .electro-stock-availability .stock, .single-product .product-actions .availability .stock { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #15803d !important; background: #f0fdf4 !important; border: 1px solid #86efac !important; padding: 5px 12px !important; border-radius: 6px !important; box-shadow: none !important; } .single-product .product-actions .availability .stock::before { content: '●' !important; font-size: 10px !important; margin-right: 6px !important; color: #16a34a !important; display: inline-block !important; line-height: 1 !important; } /* 3. Badge amarillo de requerimiento de cotización */ .single-product-wrapper .product-actions-wrapper .product-actions .price, .single-product .product-actions-wrapper .product-actions .price, .single-product .product-actions .price { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; font-size: 13px !important; } .single-product .product-actions .price .tcvp-price-expired-badge { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding: 10px 14px !important; background: #fffbeb !important; border: 1px solid #fde68a !important; border-radius: 8px !important; color: #92400e !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.35 !important; box-sizing: border-box !important; margin: 0 !important; } .single-product .product-actions .price .tcvp-price-expired-badge i, .single-product .product-actions .price .tcvp-price-expired-badge .fas { font-size: 14px !important; color: #d97706 !important; margin-right: 8px !important; flex-shrink: 0 !important; } /* 4. Botón de Comparar */ .single-product-wrapper .product-actions-wrapper .product-actions .action-buttons, .single-product .product-actions-wrapper .product-actions .action-buttons, .single-product .product-actions .action-buttons { margin: 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .single-product .product-actions .action-buttons a.compare, .single-product .product-actions .action-buttons .add-to-compare-link { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 9px 16px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; color: #334155 !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; box-sizing: border-box !important; margin: 0 !important; } .single-product .product-actions .action-buttons a.compare:hover, .single-product .product-actions .action-buttons .add-to-compare-link:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; color: #0f172a !important; }