/* ============================================================================ MI TEMA WOOCOMMERCE V2 - CSS LIMPIO Y UNIFICADO ============================================================================ */ /* ============================================================================ LAYOUT STICKY FOOTER - FOOTER SIEMPRE EN LA PARTE INFERIOR ============================================================================ */ /* Configuración base para sticky footer */ html, body { height: 100% !important; margin: 0 !important; padding: 0 !important; } #page { min-height: 100vh !important; /* Altura mínima para mantener footer abajo */ display: flex !important; flex-direction: column !important; position: relative !important; height: auto !important; } /* Ajustar altura de página en home para evitar espacio en blanco debajo del slider */ body.home #page { min-height: auto !important; /* Permitir que la altura se ajuste al contenido */ height: auto !important; } /* El contenido principal debe expandirse para empujar el footer hacia abajo */ .content-area { flex: 1 0 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; /* Altura mínima 0 para flexbox */ height: auto !important; } .site-main { flex: 1 0 auto !important; min-height: 0 !important; /* Altura mínima 0 para flexbox */ height: auto !important; } /* Asegurar que el contenido tenga altura mínima para empujar el footer */ body:not(.home) .site-main { min-height: 0 !important; /* Altura mínima 0 para flexbox */ display: flex !important; flex-direction: column !important; } /* Asegurar que el contenido interno se expanda */ body:not(.home) .entry-content { flex: 1 0 auto !important; min-height: 0 !important; /* Altura mínima 0 para flexbox */ } /* Crear un espaciador inteligente que solo se active cuando sea necesario */ body:not(.home) .content-area::after { content: "" !important; display: block !important; min-height: 0 !important; /* Sin altura mínima forzada */ flex: 1 0 auto !important; /* Se expande solo cuando es necesario */ } /* SOBRESCRIBIR TODOS LOS ESTILOS CONFLICTIVOS DEL FOOTER */ /* 1. SOBRESCRIBIR COMPONENTS.CSS */ .mi-tema-v2-footer { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; z-index: auto !important; margin-top: auto !important; flex-shrink: 0 !important; } /* 2. SOBRESCRIBIR STYLE.CSS */ .footer { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; z-index: auto !important; margin-top: auto !important; flex-shrink: 0 !important; } /* 3. SOBRESCRIBIR ESTILOS INLINE DEL FOOTER.PHP */ footer.site-footer[style*="position"], footer.site-footer[style*="bottom"], footer.site-footer[style*="left"], footer.site-footer[style*="right"] { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; z-index: auto !important; margin-top: auto !important; flex-shrink: 0 !important; } /* Footer siempre en la parte inferior */ .site-footer { flex-shrink: 0 !important; margin-top: auto !important; position: relative !important; bottom: 0 !important; } /* Forzar que el footer esté en la parte inferior en páginas que no son home */ body:not(.home) .site-footer { /* FORZAR POSICIÓN EN LA PARTE INFERIOR */ position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; z-index: 100 !important; } /* Eliminar cualquier espacio extra en el layout */ body:not(.home) #page { min-height: 90vh !important; /* Altura mínima para mantener footer abajo */ height: auto !important; display: flex !important; flex-direction: column !important; } body:not(.home) .content-area { flex: 1 0 auto !important; min-height: 0 !important; /* Altura mínima 0 para flexbox */ height: auto !important; margin-bottom: 0 !important; /* Sin margen para evitar scroll innecesario */ padding-bottom: 0 !important; } body:not(.home) .site-main { flex: 1 0 auto !important; min-height: 0 !important; /* Altura mínima 0 para flexbox */ height: auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Asegurar que el sticky footer funcione con el sidebar fijo */ @media (min-width: 769px) { /* El sidebar está fijo, así que el content-area debe tener el margen correcto */ .content-area { margin-left: 230px !important; width: calc(100% - 230px) !important; } /* FOOTER STICKY EN DESKTOP CON SIDEBAR */ body:not(.home) .site-footer { position: absolute !important; bottom: 0 !important; left: 230px !important; right: 0 !important; width: calc(100% - 230px) !important; z-index: 100 !important; } } @media (max-width: 768px) { .content-area { margin-left: 0 !important; width: 100% !important; } /* FOOTER STICKY EN MÓVIL - AJUSTADO PARA EVITAR SUPERPOSICIÓN */ body:not(.home) .site-footer { position: relative !important; /* Cambiar a relative en móvil */ bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; z-index: auto !important; margin-top: auto !important; /* Usar flexbox en móvil */ flex-shrink: 0 !important; } /* Asegurar que el contenido tenga altura suficiente en móvil */ body:not(.home) .content-area { margin-bottom: 0 !important; min-height: calc(90vh - 100px) !important; /* Altura mínima para móvil */ } } /* ============================================================================ SIDEBAR GENERAL ============================================================================ */ .sidebar { background: #ffffff00 !important; backdrop-filter: inherit !important; -webkit-backdrop-filter: inherit !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* ============================================================================ NAVEGACIÓN DEL SIDEBAR ============================================================================ */ .sidebar-nav a, .sidebar .sidebar-nav a, .mi-tema-v2-sidebar .sidebar-nav a, .sidebar-nav li a, .sidebar .sidebar-nav li a { display: block !important; padding: 0px 0 !important; color: #000 !important; text-decoration: none !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; letter-spacing: 1px !important; text-transform: uppercase !important; transition: color 0.3s ease !important; border-bottom: 1px solid transparent !important; } .sidebar-nav li { margin-bottom: 0px !important; } /* ============================================================================ SUBMENÚS DEL SIDEBAR ============================================================================ */ .sidebar-nav .menu-item-has-children { position: relative !important; } .sidebar-nav .menu-item-has-children > a { position: relative !important; padding-right: 40px !important; } .sidebar-nav .menu-item-has-children > a::after { content: "▼" !important; position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 10px !important; transition: transform 0.3s ease !important; color: #000 !important; } .sidebar-nav .menu-item-has-children:hover > a::after { transform: translateY(-50%) rotate(180deg) !important; } .sidebar-nav .submenu { list-style: none !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.9) !important; border-left: none !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease !important; } .sidebar-nav .menu-item-has-children:hover .submenu { max-height: 500px !important; } .sidebar-nav .submenu li { border-bottom: none !important; border-left: none !important; margin-bottom: 0 !important; } .sidebar-nav .submenu a { padding: 8px 20px 8px 35px !important; font-size: 12px !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0.5px !important; color: #666 !important; border-bottom: none !important; } .sidebar-nav .submenu a:hover { background: rgba(0, 0, 0, 0.05) !important; color: #333 !important; border-bottom: none !important; } /* ============================================================================ ESTILOS PARA MENÚ DE TIENDA SIN ENLACE ============================================================================ */ .menu-item-no-link { color: #ffffff !important; cursor: pointer !important; padding: 10px 15px !important; display: block !important; text-decoration: none !important; font-weight: 400 !important; transition: color 0.3s ease !important; } .menu-item-no-link:hover { color: #4CAF50 !important; } /* Asegurar que el submenú funcione con el span */ .menu-item-has-children .menu-item-no-link { position: relative !important; } .menu-item-has-children:hover .submenu { display: block !important; } /* ============================================================================ LOGO DEL SIDEBAR ============================================================================ */ .sidebar-logo { margin-top: 10px !important; margin-bottom: 30px !important; } /* ============================================================================ FOOTER DEL SIDEBAR ============================================================================ */ .sidebar-footer { margin-top: auto !important; padding-top: 20px !important; border: none !important; } /* ============================================================================ RESPONSIVE: MÓVIL ============================================================================ */ @media (max-width: 768px) { /* ============================================================================ SIDEBAR MÓVIL ============================================================================ */ .sidebar { transform: translateX(-100%) !important; visibility: hidden !important; opacity: 0 !important; position: fixed !important; left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; z-index: 1001 !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sidebar.active { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================================================ LOGO MÓVIL ============================================================================ */ .mobile-logo { display: block !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; top: 20px !important; left: 20px !important; z-index: 1001 !important; width: 120px !important; height: auto !important; transition: all 0.3s ease !important; background: transparent !important; padding: 5px !important; border-radius: 5px !important; } .mobile-logo img { width: 100% !important; height: auto !important; max-width: 120px !important; display: block !important; } .mobile-logo .logo-text { font-size: 18px !important; font-weight: bold !important; color: #000000 !important; text-decoration: none !important; display: block !important; } /* ============================================================================ CONTENT AREA MÓVIL ============================================================================ */ .main-content { margin-left: 0 !important; width: 100% !important; } /* CONTENT AREA MÓVIL - EXCLUYENDO HOME */ body:not(.home) .content-area { margin-left: 0 !important; width: 100% !important; padding: 0px !important; } /* ============================================================================ FOOTER MÓVIL ============================================================================ */ .footer-content, .site-footer .footer-content, footer .footer-content { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 20px !important; padding: 20px 10px !important; align-items: flex-start !important; justify-content: flex-start !important; } .footer-section, .site-footer .footer-section, footer .footer-section { display: block !important; flex: none !important; flex-basis: auto !important; min-width: auto !important; width: 100% !important; max-width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; } .footer-section h4, .site-footer .footer-section h4, footer .footer-section h4 { font-size: 1rem !important; margin-bottom: 10px !important; text-align: left !important; } .footer-section p, .site-footer .footer-section p, footer .footer-section p { font-size: 0.85rem !important; margin-bottom: 6px !important; text-align: left !important; } .footer-logo { max-width: 150px !important; margin: 0 0 20px 0 !important; } /* ============================================================================ PRODUCTOS MÓVIL ============================================================================ */ .single-product .product { grid-template-columns: 1fr !important; gap: 20px !important; padding: 10px !important; } .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 15px !important; } .woocommerce ul.products li.product { margin-bottom: 15px !important; } /* ============================================================================ WOOCOMMERCE MÓVIL - PADDING PARA CONTENIDOS ============================================================================ */ body:not(.home) .woocommerce, body:not(.home) .woocommerce-page { padding: 10px !important; } body:not(.home) .woocommerce .woocommerce, body:not(.home) .woocommerce-page .woocommerce { padding: 10px !important; } body:not(.home) .woocommerce .woocommerce-page, body:not(.home) .woocommerce-page .woocommerce-page { padding: 10px !important; } /* Contenedores principales de WooCommerce */ body:not(.home) .woocommerce .woocommerce-products-header, body:not(.home) .woocommerce-page .woocommerce-products-header { padding: 10px !important; } body:not(.home) .woocommerce .woocommerce-notices-wrapper, body:not(.home) .woocommerce-page .woocommerce-notices-wrapper { padding: 10px !important; } /* Productos individuales */ body:not(.home) .single-product .product { padding: 10px !important; } /* Páginas de carrito y checkout */ body:not(.home) .woocommerce-cart .woocommerce, body:not(.home) .woocommerce-checkout .woocommerce { padding: 10px !important; } body:not(.home) .woocommerce-cart .woocommerce-cart, body:not(.home) .woocommerce-checkout .woocommerce-checkout { padding: 10px !important; } /* Contenedor específico de la tienda */ .woocommerce-shop .container { padding: 30px !important; } /* Alertas de WooCommerce en móvil */ .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce .woocommerce-notice, .woocommerce-page .woocommerce-notice { padding: 12px 15px !important; margin: 15px 0 !important; font-size: 13px !important; border-radius: 4px !important; } /* Botón de cerrar en móvil */ .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-message .button { padding: 6px 12px !important; font-size: 11px !important; margin-left: 8px !important; } /* Alertas específicas para single product en móvil */ body.single-product .woocommerce-notices-wrapper, .single-product .woocommerce-notices-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.single-product .woocommerce-notices-wrapper .woocommerce-message, .single-product .woocommerce-notices-wrapper .woocommerce-message { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 15px 0 !important; padding: 12px 15px !important; font-size: 13px !important; border-radius: 4px !important; background: #f0f8f0 !important; border: 1px solid #4caf50 !important; color: #2e7d32 !important; border-left: 4px solid #4caf50 !important; } /* ============================================================================ CORRECCIÓN DE VARIACIONES EN MÓVIL ============================================================================ */ /* Contenedor de variaciones */ .single-product .variations { position: relative !important; z-index: 10 !important; margin-bottom: 20px !important; } /* Select de variaciones */ .single-product .variations select { position: relative !important; z-index: 11 !important; width: 100% !important; max-width: 100% !important; padding: 10px !important; border: 1px solid #000000 !important; background: #ffffff !important; border-radius: 0 !important; font-size: 14px !important; line-height: 1.5 !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px !important; padding-right: 40px !important; } /* Dropdown de variaciones - corregir posicionamiento */ .single-product .variations select:focus { outline: none !important; border-color: #000000 !important; box-shadow: none !important; z-index: 12 !important; } /* Opciones del dropdown */ .single-product .variations select option { background: #ffffff !important; color: #000000 !important; padding: 10px !important; font-size: 14px !important; line-height: 1.5 !important; } /* Label de variaciones */ .single-product .variations label { display: block !important; margin-bottom: 8px !important; font-weight: bold !important; color: #000000 !important; font-size: 14px !important; } /* Contenedor de variaciones individuales */ .single-product .variations .value { position: relative !important; z-index: 10 !important; margin-bottom: 15px !important; } /* Forzar posicionamiento correcto en móvil */ .single-product .variations td { position: relative !important; z-index: 10 !important; vertical-align: top !important; padding: 5px 0 !important; } .single-product .variations td.label { width: 30% !important; padding-right: 10px !important; } .single-product .variations td.value { width: 70% !important; position: relative !important; } /* Asegurar que el dropdown no se salga del viewport */ .single-product .variations select { max-width: calc(100vw - 40px) !important; box-sizing: border-box !important; } /* Corrección específica para dropdowns flotantes */ .single-product .variations select:focus { position: relative !important; z-index: 9999 !important; transform: none !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; } /* Forzar posicionamiento correcto del dropdown nativo */ .single-product .variations select { position: relative !important; transform: none !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; } /* Contenedor de variaciones - asegurar posicionamiento */ .single-product .variations { position: relative !important; overflow: visible !important; z-index: 10 !important; } /* Tabla de variaciones */ .single-product .variations table { position: relative !important; z-index: 10 !important; width: 100% !important; border-collapse: collapse !important; } /* Asegurar que el dropdown aparezca en la posición correcta */ .single-product .variations select option { position: relative !important; z-index: 9999 !important; } /* ============================================================================ GALERÍA - MANEJADA POR galeria-esencial.css ============================================================================ */ } /* ============================================================================ RESPONSIVE: DESKTOP ============================================================================ */ @media (min-width: 769px) { /* ============================================================================ SIDEBAR DESKTOP ============================================================================ */ .sidebar { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; left: 30px !important; top: 0 !important; width: 200px !important; height: 100vh !important; z-index: 1001 !important; background: #ffffff00 !important; backdrop-filter: inherit !important; -webkit-backdrop-filter: inherit !important; } .mobile-logo, div.mobile-logo, span.mobile-logo, a.mobile-logo { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; z-index: -1 !important; } /* ============================================================================ CONTENT AREA DESKTOP ============================================================================ */ .main-content { margin-left: 230px !important; width: calc(100% - 230px) !important; transition: margin-left 0.3s ease !important; position: relative !important; z-index: 1 !important; } /* CONTENT AREA GENERAL - EXCLUYENDO HOME */ body:not(.home) .content-area { flex: 1 0 auto !important; min-height: 0 !important; height: auto !important; margin-bottom: 150px !important; padding-bottom: 0 !important; margin-left: 230px !important; width: calc(100% - 230px) !important; padding: 20px !important; position: relative !important; z-index: 1 !important; box-sizing: border-box !important; } .site-main { margin-left: 0 !important; width: 100% !important; position: relative !important; z-index: 1 !important; } /* ============================================================================ SINGLE PRODUCT DESKTOP - UNA SOLA COLUMNA ============================================================================ */ .single-product .product { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; max-width: 800px !important; margin: 0 auto !important; padding: 20px !important; } .woocommerce-cart-container { max-width: 1200px; margin: 0 auto; padding: 50px; } .cart-content { padding: 50px; } /* Galería manejada por galeria-esencial.css */ .single-product .product .summary { order: 2 !important; width: 100% !important; padding: 0 !important; } .single-product .product .woocommerce-tabs { order: 3 !important; width: 100% !important; margin-top: 30px !important; } .single-product .product .related { order: 4 !important; width: 100% !important; margin-top: 30px !important; } /* ============================================================================ FUENTE DEL SITIO PARA SINGLE PRODUCT ============================================================================ */ /* Título del producto */ .single-product .product .product_title, .single-product .product h1.product_title, .single-product .product .entry-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold !important; color: #000000 !important; } /* Precio del producto */ .single-product .product .price, .single-product .product .price .amount, .single-product .product .price del, .single-product .product .price ins, .single-product .product .price .woocommerce-Price-amount, .single-product .product .price .woocommerce-Price-currencySymbol { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Descripción corta */ .single-product .product .woocommerce-product-details__short-description, .single-product .product .short-description { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Descripción completa */ .single-product .product .woocommerce-product-details__full-description, .single-product .product .description { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Atributos del producto */ .single-product .product .product_meta, .single-product .product .product_meta span, .single-product .product .product_meta a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Tabs */ .single-product .product .woocommerce-tabs h2, .single-product .product .woocommerce-tabs h3, .single-product .product .woocommerce-tabs .tabs li a, .single-product .product .woocommerce-tabs .panel h2, .single-product .product .woocommerce-tabs .panel p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Botones */ .single-product .product .single_add_to_cart_button, .single-product .product .button, .single-product .product .add_to_cart_button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Cantidad */ .single-product .product .quantity input, .single-product .product .quantity label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Variaciones */ .single-product .product .variations label, .single-product .product .variations select, .single-product .product .variations td { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* Productos relacionados */ .single-product .product .related h2, .single-product .product .related .products .product .woocommerce-loop-product__title, .single-product .product .related .products .product .price { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; } /* ============================================================================ COLORES NEGROS PARA SINGLE PRODUCT - ESTILOS AGRESIVOS ============================================================================ */ /* Forzar colores negros en todos los elementos de single product */ .single-product *, .single-product .product *, .single-product .woocommerce *, .single-product .woocommerce-product-gallery *, .single-product .summary *, .single-product .woocommerce-tabs *, .single-product .related * { color: #000000 !important; } /* Excepciones para imágenes y elementos que no deben cambiar color */ .single-product .woocommerce-product-gallery img, .single-product .woocommerce-product-gallery svg, .single-product img, .single-product svg, .single-product .woocommerce-product-gallery .flex-control-nav img, .single-product .woocommerce-product-gallery .flex-control-thumbs img { color: inherit !important; } /* ============================================================================ CORRECCIÓN PARA IMÁGENES DE PRODUCTOS - SOBRESCRIBIR ESTILOS DE WOOCOMMERCE ============================================================================ */ /* ============================================================================ ESTILOS ESPECÍFICOS PARA IMÁGENES ÚNICAS DE PRODUCTOS ============================================================================ */ /* ============================================================================ ESTILOS ULTRA ESPECÍFICOS PARA IMÁGENES ÚNICAS - MÁXIMA ESPECIFICIDAD ============================================================================ */ /* Estilos para imágenes únicas (sin galería) - MÁXIMA ESPECIFICIDAD */ body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) img, body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; min-height: auto !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; transition: transform 0.3s ease !important; } /* Efectos hover para imágenes únicas */ .woocommerce div.product div.images:not(.woocommerce-product-gallery) img:hover, .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img:hover { transform: scale(1.02) !important; } /* ============================================================================ ESTILOS PARA GALERÍAS DE PRODUCTOS (MANTENER DIMENSIONES ESPECÍFICAS) ============================================================================ */ /* Estilos para galerías de productos */ .woocommerce div.product div.images.woocommerce-product-gallery img, .woocommerce div.product .woocommerce-product-gallery img { display: block !important; transition: transform 0.3s ease !important; } /* Efectos hover para galerías */ .woocommerce div.product div.images.woocommerce-product-gallery img:hover, .woocommerce div.product .woocommerce-product-gallery img:hover { transform: scale(1.02) !important; } /* ============================================================================ SOBRESCRIBIR ESTILOS DE GALERIA-ESENCIAL.CSS PARA IMÁGENES ÚNICAS ============================================================================ */ /* Anular estilos de galeria-esencial.css para imágenes únicas */ .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image, .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; min-height: auto !important; object-fit: contain !important; object-position: center !important; } /* ============================================================================ SOBRESCRIBIR TODOS LOS POSIBLES CONFLICTOS ============================================================================ */ /* Asegurar que las imágenes únicas no hereden estilos de galería */ body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .slides, body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .slides li, body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .flex-viewport, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .slides, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .slides li, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .flex-viewport { width: 100% !important; height: auto !important; max-height: none !important; min-height: auto !important; } /* SOBRESCRIBIR CUALQUIER ESTILO DE WOOCOMMERCE PARA IMÁGENES ÚNICAS */ body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) { width: 100% !important; height: auto !important; max-height: none !important; min-height: auto !important; overflow: visible !important; display: block !important; flex-direction: unset !important; align-items: unset !important; } body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .woocommerce-product-gallery__image { width: 100% !important; height: auto !important; max-height: none !important; min-height: auto !important; } /* ============================================================================ ESTILOS RESPONSIVOS PARA IMÁGENES ÚNICAS ============================================================================ */ /* En móvil, las imágenes únicas ocupan más espacio */ @media (max-width: 768px) { body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) img, body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) img { width: 60% !important; max-width: 60% !important; } } /* En pantallas muy pequeñas, ocupar todo el ancho disponible */ @media (max-width: 480px) { body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) img, body.single-product .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) .woocommerce-product-gallery__image img, body.single-product .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-control-nav)):not(:has(.flex-control-thumbs)):not(:has(.woocommerce-product-gallery__image:not(:only-child))) img { width: 75% !important; max-width: 75% !important; } } /* ============================================================================ ESTILOS ESPECÍFICOS PARA CONTENEDORES DE IMÁGENES ============================================================================ */ /* Contenedor general de imágenes */ .woocommerce div.product div.images { margin-bottom: 2em !important; } /* ============================================================================ ESTILOS DE GALERÍA - REORGANIZADOS Y LIMPIOS ============================================================================ */ /* Estilos base para contenedores de imágenes */ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { float: none !important; text-align: center !important; margin: 0 auto !important; display: block !important; } /* MÓVIL: Todas las imágenes al 50% */ @media (max-width: 768px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 50% !important; } } /* DESKTOP: Diferenciar entre galerías e imágenes únicas */ @media (min-width: 769px) { /* Galerías con múltiples imágenes: 80% */ .woocommerce #content div.product div.images.woocommerce-product-gallery, .woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce-page #content div.product div.images.woocommerce-product-gallery, .woocommerce-page div.product div.images.woocommerce-product-gallery { width: 80% !important; } /* Imágenes únicas: 100% */ .woocommerce #content div.product div.images:not(.woocommerce-product-gallery), .woocommerce div.product div.images:not(.woocommerce-product-gallery), .woocommerce-page #content div.product div.images:not(.woocommerce-product-gallery), .woocommerce-page div.product div.images:not(.woocommerce-product-gallery) { width: 100% !important; } } /* ============================================================================ ESTILOS ESPECÍFICOS PARA IMÁGENES ÚNICAS ============================================================================ */ .woocommerce div.product div.images:not(.woocommerce-product-gallery) { max-width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; } /* ============================================================================ ESTILOS ESPECÍFICOS PARA GALERÍAS REGULARES ============================================================================ */ .woocommerce div.product div.images.woocommerce-product-gallery img, .woocommerce div.product .woocommerce-product-gallery img { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; } /* ============================================================================ ESTILOS PARA MINIATURAS Y ELEMENTOS ADICIONALES ============================================================================ */ /* Estilos para las miniaturas de la galería */ .woocommerce div.product div.images div.thumbnails { padding-top: 1em !important; } /* Asegurar que las imágenes únicas no se vean afectadas por estilos de galería */ .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image { width: 100% !important; height: auto !important; max-height: none !important; min-height: auto !important; } .woocommerce div.product div.images:not(.woocommerce-product-gallery) .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; max-height: none !important; min-height: auto !important; object-fit: contain !important; object-position: center !important; } .woocommerce div.product div.images div.thumbnails img { transition: transform 0.3s ease !important; } .woocommerce div.product div.images div.thumbnails img:hover { transform: scale(1.05) !important; } /* Estilos específicos para elementos de texto */ .single-product .product .product_title, .single-product .product h1.product_title, .single-product .product .entry-title, .single-product .product .woocommerce-loop-product__title { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold !important; } .single-product .product .price, .single-product .product .price .amount, .single-product .product .price del, .single-product .product .price ins, .single-product .product .price .woocommerce-Price-amount, .single-product .product .price .woocommerce-Price-currencySymbol { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .woocommerce-product-details__short-description, .single-product .product .short-description, .single-product .product .description, .single-product .product .woocommerce-product-details__full-description { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .product_meta, .single-product .product .product_meta span, .single-product .product .product_meta a, .single-product .product .product_meta strong { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .woocommerce-tabs h2, .single-product .product .woocommerce-tabs h3, .single-product .product .woocommerce-tabs .tabs li a, .single-product .product .woocommerce-tabs .panel h2, .single-product .product .woocommerce-tabs .panel p, .single-product .product .woocommerce-tabs .panel table, .single-product .product .woocommerce-tabs .panel table td, .single-product .product .woocommerce-tabs .panel table th { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .single_add_to_cart_button, .single-product .product .button, .single-product .product .add_to_cart_button, .single-product .product .variations_button { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .quantity input, .single-product .product .quantity label, .single-product .product .quantity .qty { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .variations label, .single-product .product .variations select, .single-product .product .variations td, .single-product .product .variations th, .single-product .product .variations .value { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .single-product .product .related h2, .single-product .product .related .products .product .woocommerce-loop-product__title, .single-product .product .related .products .product .price, .single-product .product .related .products .product .price .amount { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } } /* ============================================================================ ESTILOS GLOBALES ============================================================================ */ body, body * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .woocommerce *, .woocommerce-page * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; } /* ============================================================================ FUENTE DEL SITIO PARA ELEMENTOS ESPECÍFICOS DE WOOCOMMERCE ============================================================================ */ /* Títulos de productos */ .woocommerce .products .product .woocommerce-loop-product__title, .woocommerce .products .product h2.woocommerce-loop-product__title, .woocommerce .products .product .woocommerce-loop-product__title a, .woocommerce .products .product h2.woocommerce-loop-product__title a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1.2rem !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; text-transform: none !important; } /* Precios de productos */ .woocommerce .products .product .price, .woocommerce .products .product .price .amount, .woocommerce .products .product .price del, .woocommerce .products .product .price ins { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; } /* Títulos de categorías y páginas */ .woocommerce .woocommerce-products-header__title, .woocommerce .woocommerce-products-header__title.page-title, .woocommerce .page-title, .woocommerce h1.page-title, .woocommerce h1.woocommerce-products-header__title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 2rem !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; text-transform: none !important; } /* Enlaces de productos */ .woocommerce .products .product .woocommerce-loop-product__link, .woocommerce .products .product a.woocommerce-loop-product__link { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; } /* Botones (aunque los ocultaremos después) */ .woocommerce .products .product .button, .woocommerce .products .product .add_to_cart_button, .woocommerce .products .product .single_add_to_cart_button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; } /* Navegación de WooCommerce */ .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-result-count { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; } /* Breadcrumbs */ .woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 0.9rem !important; line-height: 1.4 !important; } /* ============================================================================ COLORES NEGROS PARA TODOS LOS ELEMENTOS DE WOOCOMMERCE ============================================================================ */ /* ============================================================================ FONDOS BLANCOS PARA TODOS LOS ELEMENTOS DE WOOCOMMERCE ============================================================================ */ /* ============================================================================ PROTECCIÓN ESPECÍFICA PARA LA PÁGINA DEL HOME ============================================================================ */ /* Proteger elementos del home de las reglas de WooCommerce */ body.home .home-slider, body.home .home-slider *, body.home .slider-content, body.home .slider-content *, body.home .slide, body.home .slide *, body.home .slick-slider, body.home .slick-slider *, body.home .slick-list, body.home .slick-list *, body.home .slick-track, body.home .slick-track *, body.home .slick-slide, body.home .slick-slide * { background: transparent !important; color: inherit !important; font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } /* Proteger imágenes del slider del home */ body.home .home-slider img, body.home .slide img, body.home .slick-slide img { background: transparent !important; border: none !important; border-radius: inherit !important; box-shadow: inherit !important; } /* Fondos blancos para todos los elementos de WooCommerce */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body.woocommerce:not(.home) *, /* Estilo problemático eliminado - causaba transparencia en elementos */ /* ============================================================================ SOBRESCRIBIR ESTILOS PROBLEMÁTICOS DE PLUGINS ============================================================================ */ /* Sobrescribir el estilo problemático que causa transparencia */ body.woocommerce-page:not(.home) *:not(select):not(select option), body:not(.home) .woocommerce *:not(select):not(select option) { background: transparent !important; } /* Asegurar que los elementos tengan fondos apropiados */ body.woocommerce-page:not(.home) .woocommerce, body:not(.home) .woocommerce-page .woocommerce, body.woocommerce-page:not(.home) .woocommerce-page, body:not(.home) .woocommerce-page { background: #ffffff !important; } /* Contenedores principales */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce, body:not(.home) .woocommerce-page, body:not(.home) .woocommerce .woocommerce, body:not(.home) .woocommerce-page .woocommerce, body:not(.home) .woocommerce .woocommerce-page, body:not(.home) .woocommerce-page .woocommerce-page { background: #ffffff !important; } /* Formularios de WooCommerce */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce form, body:not(.home) .woocommerce-page form, body:not(.home) .woocommerce .woocommerce-form, body:not(.home) .woocommerce-page .woocommerce-form, body:not(.home) .woocommerce .woocommerce-checkout, body:not(.home) .woocommerce-page .woocommerce-checkout, body:not(.home) .woocommerce .woocommerce-cart, body:not(.home) .woocommerce-page .woocommerce-cart { background: #ffffff !important; } /* Campos de formulario */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce input, body:not(.home) .woocommerce-page input, body:not(.home) .woocommerce select, body:not(.home) .woocommerce-page select, body:not(.home) .woocommerce textarea, body:not(.home) .woocommerce-page textarea, body:not(.home) .woocommerce .woocommerce-input, body:not(.home) .woocommerce-page .woocommerce-input { background: #ffffff !important; border: 1px solid #000000 !important; } /* Tablas de WooCommerce */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce table, body:not(.home) .woocommerce-page table, body:not(.home) .woocommerce .woocommerce-table, body:not(.home) .woocommerce-page .woocommerce-table, body:not(.home) .woocommerce .shop_table, body:not(.home) .woocommerce-page .shop_table { background: #ffffff !important; } /* Filas de tablas */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce table tr, body:not(.home) .woocommerce-page table tr, body:not(.home) .woocommerce .woocommerce-table tr, body:not(.home) .woocommerce-page .woocommerce-table tr, body:not(.home) .woocommerce .shop_table tr, body:not(.home) .woocommerce-page .shop_table tr { background: #ffffff !important; } /* Celdas de tablas */ /* EXCLUYENDO LA PÁGINA DEL HOME */ body:not(.home) .woocommerce table td, body:not(.home) .woocommerce-page table td, body:not(.home) .woocommerce table th, body:not(.home) .woocommerce-page table th, body:not(.home) .woocommerce .woocommerce-table td, body:not(.home) .woocommerce-page .woocommerce-table td, body:not(.home) .woocommerce .woocommerce-table th, body:not(.home) .woocommerce-page .woocommerce-table th, body:not(.home) .woocommerce .shop_table td, body:not(.home) .woocommerce-page .shop_table td, body:not(.home) .woocommerce .shop_table th, body:not(.home) .woocommerce-page .shop_table th { background: #ffffff !important; } /* Contenedores de productos */ .woocommerce .products, .woocommerce-page .products, .woocommerce .product, .woocommerce-page .product, .woocommerce .products .product, .woocommerce-page .products .product { background: #ffffff !important; } /* Contenedores de información de productos */ .woocommerce .product-summary, .woocommerce-page .product-summary, .woocommerce .product-details, .woocommerce-page .product-details, .woocommerce .woocommerce-product-details, .woocommerce-page .woocommerce-product-details { background: #ffffff !important; } /* Contenedores de navegación */ .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering, .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count, .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { background: #ffffff !important; } /* Contenedores de paginación */ .woocommerce .woocommerce-pagination, .woocommerce-page .woocommerce-pagination, .woocommerce nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination { background: #ffffff !important; } /* Contenedores de mensajes */ .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce .woocommerce-notice, .woocommerce-page .woocommerce-notice { background: #ffffff !important; border: 1px solid #000000 !important; padding: 15px 20px !important; margin: 20px 0 !important; border-radius: 5px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: #000000 !important; position: relative !important; z-index: 100 !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; box-sizing: border-box !important; } /* Wrapper de notificaciones - Asegurar visibilidad */ .woocommerce .woocommerce-notices-wrapper, .woocommerce-page .woocommerce-notices-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; position: relative !important; z-index: 99 !important; margin: 0 !important; padding: 0 !important; } /* Contenedor de mensajes individuales */ .woocommerce .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-page .woocommerce-notices-wrapper .woocommerce-message, .woocommerce .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-page .woocommerce-notices-wrapper .woocommerce-error, .woocommerce .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-page .woocommerce-notices-wrapper .woocommerce-info, .woocommerce .woocommerce-notices-wrapper .woocommerce-notice, .woocommerce-page .woocommerce-notices-wrapper .woocommerce-notice { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 20px 0 !important; padding: 15px 20px !important; border-radius: 5px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; position: relative !important; z-index: 100 !important; box-sizing: border-box !important; } /* Mensaje de éxito específico */ .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message { background: #f0f8f0 !important; border: 1px solid #000000 !important; color: #000000 !important; border-left: 4px solid #000000 !important; } /* Mensaje de error específico */ .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { background: #ffebee !important; border: 1px solid #f44336 !important; color: #c62828 !important; border-left: 4px solid #f44336 !important; } /* Mensaje de información específico */ .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info { background: #e3f2fd !important; border: 1px solid #000000 !important; color: #000000 !important; border-left: 4px solid #000000 !important; } /* Mensaje de notificación específico */ .woocommerce .woocommerce-notice, .woocommerce-page .woocommerce-notice { background: #fff3e0 !important; border: 1px solid #ff9800 !important; color: #e65100 !important; border-left: 4px solid #ff9800 !important; } /* Enlaces dentro de los mensajes */ .woocommerce .woocommerce-message a, .woocommerce-page .woocommerce-message a, .woocommerce .woocommerce-error a, .woocommerce-page .woocommerce-error a, .woocommerce .woocommerce-info a, .woocommerce-page .woocommerce-info a, .woocommerce .woocommerce-notice a, .woocommerce-page .woocommerce-notice a { color: inherit !important; text-decoration: underline !important; font-weight: bold !important; } .woocommerce .woocommerce-message a:hover, .woocommerce-page .woocommerce-message a:hover, .woocommerce .woocommerce-error a:hover, .woocommerce-page .woocommerce-error a:hover, .woocommerce .woocommerce-info a:hover, .woocommerce-page .woocommerce-info a:hover, .woocommerce .woocommerce-notice a:hover, .woocommerce-page .woocommerce-notice a:hover { opacity: 0.8 !important; } /* Botón de cerrar mensaje */ .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-message .button { background: #000000 !important; color: #ffffff !important; border: none !important; padding: 8px 15px !important; border-radius: 3px !important; text-decoration: none !important; display: inline-block !important; margin-left: 10px !important; font-size: 12px !important; font-weight: bold !important; } /* Iconos de mensajes de WooCommerce */ .woocommerce-error::before, .woocommerce-info::before { font-family: WooCommerce !important; content: "\e028" !important; content: "\e028" / "" !important; display: inline-block !important; position: absolute !important; top: 1em !important; left: 0.1em !important; } /* Icono específico para mensajes de éxito */ .woocommerce-message::before { font-family: WooCommerce !important; content: "\e015" !important; content: "\e015" / "" !important; display: inline-block !important; position: absolute !important; top: 1em !important; left: 0.1em !important; color: #000000 !important; } /* Posicionamiento específico para single product */ .single-product .woocommerce-notices-wrapper { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .single-product .woocommerce-notices-wrapper .woocommerce-message { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1001 !important; margin: 20px 0 !important; padding: 15px 20px !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Asegurar que las alertas aparezcan antes del contenido del producto */ .single-product .woocommerce-notices-wrapper { order: -1 !important; flex-basis: 100% !important; width: 100% !important; margin-bottom: 20px !important; } /* Estilos específicos para single product - MÁS AGRESIVOS */ body.single-product .woocommerce-notices-wrapper, .single-product .woocommerce-notices-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; position: relative !important; z-index: 1000 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } body.single-product .woocommerce-notices-wrapper .woocommerce-message, .single-product .woocommerce-notices-wrapper .woocommerce-message { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 20px 0 !important; padding: 15px 20px !important; border-radius: 5px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; position: relative !important; z-index: 1001 !important; box-sizing: border-box !important; background: #f0f8f0 !important; border: 1px solid #4caf50 !important; color: #2e7d32 !important; border-left: 4px solid #4caf50 !important; } /* Asegurar que el wrapper esté en la parte superior */ body.single-product .content-area .woocommerce-notices-wrapper, .single-product .content-area .woocommerce-notices-wrapper { order: -1 !important; flex-basis: 100% !important; width: 100% !important; margin-bottom: 20px !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Forzar visibilidad en cualquier contenedor */ body.single-product * .woocommerce-notices-wrapper, .single-product * .woocommerce-notices-wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; } body.single-product * .woocommerce-notices-wrapper .woocommerce-message, .single-product * .woocommerce-notices-wrapper .woocommerce-message { display: block !important; visibility: visible !important; opacity: 1 !important; } .woocommerce .woocommerce-message .button:hover, .woocommerce-page .woocommerce-message .button:hover { background: #45a049 !important; color: #ffffff !important; } /* Contenedores de widgets */ .woocommerce .widget, .woocommerce-page .widget, .woocommerce .woocommerce-widget, .woocommerce-page .woocommerce-widget { background: #ffffff !important; } /* Contenedores de filtros */ .woocommerce .woocommerce-widget-layered-nav, .woocommerce-page .woocommerce-widget-layered-nav, .woocommerce .woocommerce-widget-price-filter, .woocommerce-page .woocommerce-widget-price-filter { background: #ffffff !important; } /* Contenedores de carrito y checkout */ .woocommerce .woocommerce-cart, .woocommerce-page .woocommerce-cart, .woocommerce .woocommerce-checkout, .woocommerce-page .woocommerce-checkout, .woocommerce .cart, .woocommerce-page .cart, .woocommerce .checkout, .woocommerce-page .checkout { background: #ffffff !important; } /* Contenedores de cuenta */ .woocommerce .woocommerce-account, .woocommerce-page .woocommerce-account, .woocommerce .woocommerce-MyAccount, .woocommerce-page .woocommerce-MyAccount { background: #ffffff !important; } /* Contenedores de pestañas */ .woocommerce .woocommerce-tabs, .woocommerce-page .woocommerce-tabs, .woocommerce .tabs, .woocommerce-page .tabs { background: #ffffff !important; } /* Contenedores de pestañas individuales */ .woocommerce .woocommerce-tabs .panel, .woocommerce-page .woocommerce-tabs .panel, .woocommerce .tabs .panel, .woocommerce-page .tabs .panel { background: #ffffff !important; } /* Contenedores de productos relacionados */ .woocommerce .related, .woocommerce-page .related, .woocommerce .upsells, .woocommerce-page .upsells, .woocommerce .cross-sells, .woocommerce-page .cross-sells { background: #ffffff !important; } /* Contenedores de reseñas */ .woocommerce .woocommerce-Reviews, .woocommerce-page .woocommerce-Reviews, .woocommerce .reviews, .woocommerce-page .reviews { background: #ffffff !important; } /* Contenedores de variaciones */ .woocommerce .variations, .woocommerce-page .variations, .woocommerce .woocommerce-variation, .woocommerce-page .woocommerce-variation { background: #ffffff !important; } /* Contenedores de meta información */ .woocommerce .product_meta, .woocommerce-page .product_meta, .woocommerce .woocommerce-product-attributes, .woocommerce-page .woocommerce-product-attributes { background: #ffffff !important; } /* Elementos específicos que podrían tener colores por defecto */ .woocommerce .woocommerce-loop-product__link, .woocommerce-page .woocommerce-loop-product__link, .woocommerce .woocommerce-loop-product__title, .woocommerce-page .woocommerce-loop-product__title, .woocommerce .price, .woocommerce-page .price, .woocommerce .woocommerce-Price-amount, .woocommerce-page .woocommerce-Price-amount { background: #ffffff !important; } /* Contenedores de imágenes */ .woocommerce .woocommerce-product-gallery, .woocommerce-page .woocommerce-product-gallery, .woocommerce .woocommerce-product-gallery__image, .woocommerce-page .woocommerce-product-gallery__image, .woocommerce .woocommerce-product-gallery__trigger, .woocommerce-page .woocommerce-product-gallery__trigger { background: #ffffff !important; } /* Contenedores de botones */ .woocommerce .button, .woocommerce-page .button, .woocommerce .woocommerce-button, .woocommerce-page .woocommerce-button, .woocommerce .add_to_cart_button, .woocommerce-page .add_to_cart_button, .woocommerce .single_add_to_cart_button, .woocommerce-page .single_add_to_cart_button { background: #000000 !important; color: #ffffff !important; } /* Estados de botones */ .woocommerce .button:hover, .woocommerce-page .button:hover, .woocommerce .woocommerce-button:hover, .woocommerce-page .woocommerce-button:hover, .woocommerce .add_to_cart_button:hover, .woocommerce-page .add_to_cart_button:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce-page .single_add_to_cart_button:hover { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } /* Contenedores de cantidad */ .woocommerce .quantity, .woocommerce-page .quantity, .woocommerce .woocommerce-quantity-input, .woocommerce-page .woocommerce-quantity-input { background: #ffffff !important; } /* Contenedores de variaciones */ .woocommerce .variations_form, .woocommerce-page .variations_form, .woocommerce .woocommerce-variations, .woocommerce-page .woocommerce-variations { background: #ffffff !important; } /* Contenedores de reseñas */ .woocommerce .woocommerce-Reviews-title, .woocommerce-page .woocommerce-Reviews-title, .woocommerce .comment-form, .woocommerce-page .comment-form { background: #ffffff !important; } /* Contenedores de pestañas activas */ .woocommerce .woocommerce-tabs .tabs li.active, .woocommerce-page .woocommerce-tabs .tabs li.active, .woocommerce .tabs li.active, .woocommerce-page .tabs li.active { background: #ffffff !important; border-bottom: 2px solid #000000 !important; } /* Contenedores de pestañas inactivas */ .woocommerce .woocommerce-tabs .tabs li, .woocommerce-page .woocommerce-tabs .tabs li, .woocommerce .tabs li, .woocommerce-page .tabs li { background: #ffffff !important; border: 1px solid #000000 !important; } /* Títulos de productos en negro */ .woocommerce .products .product .woocommerce-loop-product__title, .woocommerce .products .product h2.woocommerce-loop-product__title, .woocommerce .products .product .woocommerce-loop-product__title a, .woocommerce .products .product h2.woocommerce-loop-product__title a { color: #000000 !important; } /* Precios de productos en negro */ .woocommerce .products .product .price, .woocommerce .products .product .price .amount, .woocommerce .products .product .price del, .woocommerce .products .product .price ins, .woocommerce .products .product .price del .amount, .woocommerce .products .product .price ins .amount { color: #000000 !important; } /* Títulos de categorías y páginas en negro */ .woocommerce .woocommerce-products-header__title, .woocommerce .woocommerce-products-header__title.page-title, .woocommerce .page-title, .woocommerce h1.page-title, .woocommerce h1.woocommerce-products-header__title { color: #000000 !important; } /* Enlaces de productos en negro */ .woocommerce .products .product .woocommerce-loop-product__link, .woocommerce .products .product a.woocommerce-loop-product__link { color: #000000 !important; } /* Enlaces de productos en hover también en negro */ .woocommerce .products .product .woocommerce-loop-product__link:hover, .woocommerce .products .product a.woocommerce-loop-product__link:hover, .woocommerce .products .product .woocommerce-loop-product__title:hover, .woocommerce .products .product h2.woocommerce-loop-product__title:hover { color: #000000 !important; } /* Botones en negro (aunque los ocultaremos después) */ .woocommerce .products .product .button, .woocommerce .products .product .add_to_cart_button, .woocommerce .products .product .single_add_to_cart_button { color: #000000 !important; } /* Navegación de WooCommerce en negro */ .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-result-count { color: #000000 !important; } /* Breadcrumbs en negro */ .woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: #000000 !important; } /* Enlaces de breadcrumbs en hover también en negro */ .woocommerce .woocommerce-breadcrumb a:hover { color: #000000 !important; } /* Todos los textos de WooCommerce en negro */ .woocommerce *, .woocommerce-page * { color: #000000 !important; } /* Excepciones para elementos que deben mantener su color original */ .woocommerce .products .product .woocommerce-loop-product__link img, .woocommerce .products .product img, .woocommerce img, .woocommerce svg, .woocommerce .products .product svg { color: inherit !important; } /* ============================================================================ OCULTAR BOTONES ADD TO CART Y FILTROS ============================================================================ */ /* Ocultar botones de Add to Cart en archive */ .woocommerce .products .product .button, .woocommerce .products .product .add_to_cart_button, .woocommerce .products .product .single_add_to_cart_button, .woocommerce .products .product .ajax_add_to_cart, .woocommerce .products .product .product_type_simple, .woocommerce .products .product .product_type_variable, .woocommerce .products .product .product_type_grouped, .woocommerce .products .product .product_type_external, .woocommerce .products .product .add-to-cart, .woocommerce .products .product .woocommerce-loop-product__link + .button, .woocommerce .products .product .woocommerce-loop-product__link + .add_to_cart_button, .woocommerce .products .product .woocommerce-loop-product__link + .ajax_add_to_cart, .woocommerce .products .product .woocommerce-loop-product__link + .product_type_simple, .woocommerce .products .product .woocommerce-loop-product__link + .product_type_variable, .woocommerce .products .product .woocommerce-loop-product__link + .product_type_grouped, .woocommerce .products .product .woocommerce-loop-product__link + .product_type_external { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Ocultar filtros y ordenamiento */ .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-ordering select, .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-before-shop-loop, .woocommerce .woocommerce-after-shop-loop { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Ocultar widgets de filtros laterales */ .woocommerce .widget-area, .woocommerce .widget, .woocommerce .widget_price_filter, .woocommerce .widget_layered_nav, .woocommerce .widget_layered_nav_filters, .woocommerce .widget_product_categories, .woocommerce .widget_product_search, .woocommerce .widget_products, .woocommerce .widget_recent_reviews, .woocommerce .widget_recently_viewed_products, .woocommerce .widget_top_rated_products, .woocommerce .widget_onsale { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ============================================================================ OCULTAR PRECIOS EN VISTAS DE ARCHIVO ============================================================================ */ /* Ocultar precios de productos en archive */ .woocommerce .products .product .price, .woocommerce .products .product .price .amount, .woocommerce .products .product .price del, .woocommerce .products .product .price ins, .woocommerce .products .product .price del .amount, .woocommerce .products .product .price ins .amount, .woocommerce .products .product .price .woocommerce-Price-amount, .woocommerce .products .product .price .woocommerce-Price-amount.amount, .woocommerce .products .product .price .woocommerce-Price-amount bdi, .woocommerce .products .product .price .woocommerce-Price-currencySymbol, .woocommerce .products .product .price .woocommerce-Price-amount.amount bdi, .woocommerce .products .product .price .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ============================================================================ PAGINACIÓN DE WOOCOMMERCE ============================================================================ */ .woocommerce .woocommerce-pagination, .woocommerce-page .woocommerce-pagination { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; text-align: center !important; margin: 40px 0 20px 0 !important; padding: 20px 0 !important; } .woocommerce .woocommerce-pagination ul, .woocommerce-page .woocommerce-pagination ul { display: flex !important; justify-content: center !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 10px !important; } .woocommerce .woocommerce-pagination li, .woocommerce-page .woocommerce-pagination li { display: inline-block !important; margin: 0 !important; padding: 0 !important; } .woocommerce .woocommerce-pagination .page-numbers, .woocommerce-page .woocommerce-pagination .page-numbers { display: inline-block !important; padding: 10px 15px !important; margin: 0 5px !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; color: #333333 !important; text-decoration: none !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; border-radius: 4px !important; transition: all 0.3s ease !important; min-width: 40px !important; text-align: center !important; } .woocommerce .woocommerce-pagination .page-numbers:hover, .woocommerce-page .woocommerce-pagination .page-numbers:hover { background: #f5f5f5 !important; border-color: #cccccc !important; color: #000000 !important; } .woocommerce .woocommerce-pagination .page-numbers.current, .woocommerce-page .woocommerce-pagination .page-numbers.current { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; font-weight: 600 !important; } .woocommerce .woocommerce-pagination .prev, .woocommerce .woocommerce-pagination .next, .woocommerce-page .woocommerce-pagination .prev, .woocommerce-page .woocommerce-pagination .next { display: inline-block !important; padding: 10px 15px !important; margin: 0 5px !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; color: #333333 !important; text-decoration: none !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; border-radius: 4px !important; transition: all 0.3s ease !important; min-width: 40px !important; text-align: center !important; } .woocommerce .woocommerce-pagination .prev:hover, .woocommerce .woocommerce-pagination .next:hover, .woocommerce-page .woocommerce-pagination .prev:hover, .woocommerce-page .woocommerce-pagination .next:hover { background: #f5f5f5 !important; border-color: #cccccc !important; color: #000000 !important; } /* Responsive para paginación */ @media (max-width: 768px) { .woocommerce .woocommerce-pagination ul, .woocommerce-page .woocommerce-pagination ul { gap: 5px !important; } .woocommerce .woocommerce-pagination .page-numbers, .woocommerce-page .woocommerce-pagination .page-numbers, .woocommerce .woocommerce-pagination .prev, .woocommerce .woocommerce-pagination .next, .woocommerce-page .woocommerce-pagination .prev, .woocommerce-page .woocommerce-pagination .next { padding: 8px 12px !important; font-size: 13px !important; min-width: 35px !important; } } /* ============================================================================ ESTILOS COMPLETAMENTE NUEVOS PARA EL CHECKOUT ============================================================================ */ /* RESET COMPLETO PARA CHECKOUT */ .woocommerce-checkout, .woocommerce-checkout *, .woocommerce-checkout *::before, .woocommerce-checkout *::after { box-sizing: border-box !important; } /* ============================================================================ FUENTES Y COLORES OFICIALES DEL TEMA ============================================================================ */ /* Aplicar fuente oficial del tema */ form.checkout.woocommerce-checkout, form.checkout.woocommerce-checkout * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Colores oficiales del tema */ form.checkout.woocommerce-checkout { color: #000000 !important; background: #ffffff !important; } /* Títulos principales */ form.checkout.woocommerce-checkout h1, form.checkout.woocommerce-checkout h2, form.checkout.woocommerce-checkout h3, form.checkout.woocommerce-checkout h4, form.checkout.woocommerce-checkout h5, form.checkout.woocommerce-checkout h6 { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; } /* Labels y textos de formulario */ form.checkout.woocommerce-checkout label, form.checkout.woocommerce-checkout .form-row label { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 300 !important; } /* Campos de entrada */ form.checkout.woocommerce-checkout input[type="text"], form.checkout.woocommerce-checkout input[type="email"], form.checkout.woocommerce-checkout input[type="tel"], form.checkout.woocommerce-checkout input[type="password"], form.checkout.woocommerce-checkout select, form.checkout.woocommerce-checkout textarea { color: #000000 !important; background: #ffffff !important; border: 1px solid #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 400 !important; } /* Botones */ form.checkout.woocommerce-checkout button, form.checkout.woocommerce-checkout .button, form.checkout.woocommerce-checkout input[type="submit"] { background: #000000 !important; color: #ffffff !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 600 !important; border: 1px solid #000000 !important; } form.checkout.woocommerce-checkout button:hover, form.checkout.woocommerce-checkout .button:hover, form.checkout.woocommerce-checkout input[type="submit"]:hover { background: #333333 !important; color: #ffffff !important; } /* LAYOUT DE DOS COLUMNAS PRINCIPALES */ form.checkout.woocommerce-checkout .checkout-layout { display: grid !important; grid-template-columns: 2fr 1fr !important; gap: 40px !important; align-items: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* COLUMNA 1: FORMULARIO DE DATOS */ form.checkout.woocommerce-checkout .checkout-col-1 { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* COLUMNA 2: RESUMEN DEL PEDIDO */ form.checkout.woocommerce-checkout .checkout-col-2 { width: 100% !important; min-width: 320px !important; margin: 0 !important; padding: 0 !important; } /* Estilos para las secciones internas del formulario */ form.checkout.woocommerce-checkout .checkout-form-sections { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Estilos para las secciones individuales */ form.checkout.woocommerce-checkout .checkout-section { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Mensajes personalizables */ form.checkout.woocommerce-checkout .checkout-custom-messages { margin: 0 0 30px 0 !important; padding: 15px !important; background: #000000 !important; border-left: 0px solid #4caf50 !important; border-radius: 4px !important; width: 100% !important; color: #ffffff !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 300 !important; } /* Texto del mensaje personalizable */ form.checkout.woocommerce-checkout .checkout-custom-messages p, form.checkout.woocommerce-checkout .checkout-custom-messages .shipping-message { font-weight: 300 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #ffffff !important; } /* Link de contacto en el checkout */ form.checkout.woocommerce-checkout .checkout-contact-link { color: #4caf50 !important; text-decoration: underline !important; font-weight: 400 !important; margin-left: 5px !important; transition: color 0.3s ease !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } form.checkout.woocommerce-checkout .checkout-contact-link:hover { color: #45a049 !important; text-decoration: none !important; } /* FORZAR QUE EL RESUMEN DEL PEDIDO SE MANTENGA EN LA COLUMNA 2 */ form.checkout.woocommerce-checkout #order_review .woocommerce-checkout-review-order { grid-column: 2 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 20px !important; background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; position: sticky !important; top: 20px !important; } /* Sección de métodos de envío */ .woocommerce-shipping-methods { margin: 20px 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce-shipping-methods li { margin: 10px 0 !important; padding: 15px !important; background: #ffffff !important; border: 2px solid #000000 !important; border-radius: 8px !important; transition: all 0.3s ease !important; cursor: pointer !important; position: relative !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .woocommerce-shipping-methods li:hover { border-color: #4caf50 !important; background: #f0f8f0 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; } .woocommerce-shipping-methods li.checked { border-color: #4caf50 !important; background: #e8f5e8 !important; box-shadow: 0 2px 4px rgba(76,175,80,0.2) !important; } /* Radio buttons de envío */ .woocommerce-shipping-methods input[type="radio"] { position: absolute !important; opacity: 0 !important; cursor: pointer !important; } .woocommerce-shipping-methods label { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; cursor: pointer !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; font-weight: 300 !important; color: #000000 !important; margin: 0 !important; } /* Iconos para métodos de envío */ .woocommerce-shipping-methods label::before { content: "🚚" !important; font-size: 20px !important; margin-right: 10px !important; } .woocommerce-shipping-methods label[for*="local_pickup"]::before { content: "🏪" !important; } /* Precio del envío */ .woocommerce-shipping-methods .amount { font-weight: 600 !important; color: #4caf50 !important; font-size: 18px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Indicador de selección */ .woocommerce-shipping-methods li::after { content: "" !important; position: absolute !important; top: 50% !important; right: 15px !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; border: 2px solid #e0e0e0 !important; border-radius: 50% !important; background: #ffffff !important; transition: all 0.3s ease !important; } .woocommerce-shipping-methods li.checked::after { border-color: #007cba !important; background: #007cba !important; box-shadow: inset 0 0 0 4px #ffffff !important; } /* LAYOUT DE DOS COLUMNAS */ .woocommerce-checkout .col2-set { grid-column: 1 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100% !important; margin: 0 !important; padding: 0 !important; } .woocommerce-checkout #order_review { grid-column: 2 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Resumen del pedido */ .woocommerce-checkout-review-order, form.checkout.woocommerce-checkout .woocommerce-checkout-review-order { background: #ffffff !important; border: 1px solid #000000 !important; border-radius: 8px !important; padding: 20px !important; margin-top: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; width: 100% !important; min-width: 300px !important; position: sticky !important; top: 20px !important; grid-column: 2 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; font-weight: 400 !important; } /* Textos del resumen del pedido */ .woocommerce-checkout-review-order p, .woocommerce-checkout-review-order span, .woocommerce-checkout-review-order div { font-weight: 400 !important; } /* Títulos del resumen */ .woocommerce-checkout-review-order h3, .woocommerce-checkout-review-order h4 { font-weight: 600 !important; } /* Totales del resumen */ .woocommerce-checkout-review-order .order-total, .woocommerce-checkout-review-order .cart-subtotal { font-weight: 600 !important; } .woocommerce-checkout-review-order h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 20px !important; font-weight: 600 !important; color: #333 !important; margin: 0 0 20px 0 !important; padding-bottom: 10px !important; border-bottom: 2px solid #f0f0f0 !important; } /* Tabla de productos */ .woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 20px !important; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 8px !important; text-align: left !important; border-bottom: 1px solid #f0f0f0 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .woocommerce-checkout-review-order-table th { font-weight: 600 !important; color: #333 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .woocommerce-checkout-review-order-table td { font-size: 14px !important; color: #666 !important; } .woocommerce-checkout-review-order-table .product-total { font-weight: 600 !important; color: #000000 !important; text-align: right !important; } /* Totales */ .woocommerce-checkout-review-order .cart-subtotal, .woocommerce-checkout-review-order .order-total { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0px 0 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; border-bottom: 0px solid #f0f0f0 !important; } .woocommerce-checkout-review-order .order-total { font-size: 18px !important; font-weight: 700 !important; color: #333 !important; border-bottom: none !important; margin-top: 0px !important; padding-top: 0px !important; border-top: 0px solid #f0f0f0 !important; } .woocommerce-checkout-review-order .order-total .amount { color: #007cba !important; font-size: 20px !important; } /* Campos del formulario */ .woocommerce-checkout .form-row { margin-bottom: 20px !important; } .woocommerce-checkout label { display: block !important; margin-bottom: 8px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #333 !important; } .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea, .woocommerce-checkout select { width: 100% !important; padding: 12px 15px !important; border: 2px solid #e0e0e0 !important; border-radius: 6px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; color: #333 !important; background: #ffffff !important; transition: all 0.3s ease !important; box-sizing: border-box !important; } .woocommerce-checkout input[type="text"]:focus, .woocommerce-checkout input[type="email"]:focus, .woocommerce-checkout input[type="tel"]:focus, .woocommerce-checkout textarea:focus, .woocommerce-checkout select:focus { outline: none !important; border-color: #007cba !important; box-shadow: 0 0 0 3px rgba(0,123,186,0.1) !important; } /* Botón de pago */ .woocommerce-checkout #place_order { width: 100% !important; padding: 15px 30px !important; background: #000000 !important; color: #ffffff !important; border: 1px solid #000000 !important; border-radius: 6px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all 0.3s ease !important; margin-top: 20px !important; } .woocommerce-checkout #place_order:hover { background: #333333 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } /* Responsive para checkout */ @media (max-width: 768px) { .woocommerce-checkout, body.home .woocommerce-checkout, body:not(.home) .woocommerce-checkout { margin-left: 0 !important; width: 100% !important; padding: 10px !important; } /* Layout responsive */ form.checkout.woocommerce-checkout .checkout-layout { grid-template-columns: 1fr !important; gap: 20px !important; } form.checkout.woocommerce-checkout .checkout-form-sections { grid-template-columns: 1fr !important; gap: 20px !important; } .woocommerce-checkout-review-order { width: 100% !important; position: static !important; padding: 15px !important; } .woocommerce-shipping-methods li { padding: 12px !important; } .woocommerce-shipping-methods label { font-size: 14px !important; } .woocommerce-checkout-review-order h3 { font-size: 18px !important; } .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea, .woocommerce-checkout select { padding: 10px 12px !important; font-size: 13px !important; } /* Layout responsive */ .woocommerce-checkout { grid-template-columns: 1fr !important; gap: 20px !important; } .woocommerce-checkout .col2-set { grid-column: 1 !important; } .woocommerce-checkout h3#order_review_heading { grid-column: 1 !important; } .woocommerce-checkout #order_review { grid-column: 1 !important; } } /* ============================================================================ ESTILOS ADICIONALES PARA MEJORAS DEL CHECKOUT ============================================================================ */ /* Estados de campos */ .woocommerce-checkout .form-row.focused label { color: #007cba !important; font-weight: 600 !important; } .woocommerce-checkout .form-row.error input, .woocommerce-checkout .form-row.error select, .woocommerce-checkout .form-row.error textarea { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220,53,69,0.1) !important; } .woocommerce-checkout .form-row.error label { color: #dc3545 !important; } /* Animaciones para totales */ .woocommerce-checkout-review-order .animated-total { transition: all 0.3s ease !important; } .woocommerce-checkout-review-order .animated-total.updating { background: #f8f9fa !important; transform: scale(1.02) !important; } /* Botón de pago mejorado */ .woocommerce-checkout #place_order.processing { background: #6c757d !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } .woocommerce-checkout #place_order.processing:hover { background: #6c757d !important; transform: none !important; box-shadow: none !important; } /* Mejoras para métodos de envío */ .woocommerce-shipping-methods li { position: relative !important; overflow: hidden !important; } .woocommerce-shipping-methods li::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(0,123,186,0.1), transparent) !important; transition: left 0.5s ease !important; } .woocommerce-shipping-methods li:hover::before { left: 100% !important; } /* Placeholder mejorado */ .woocommerce-checkout input::placeholder, .woocommerce-checkout textarea::placeholder { color: #999 !important; font-style: italic !important; } /* Focus mejorado */ .woocommerce-checkout input:focus::placeholder, .woocommerce-checkout textarea:focus::placeholder { color: #007cba !important; opacity: 0.7 !important; } :root { --heading--font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* ============================================================================ MARGENES Y ESPACIOS ============================================================================ */ body.home { margin-top: 0 !important; padding-top: 0 !important; } body:not(.home) { margin-top: 80px !important; padding-top: 20px !important; } /* ============================================================================ FORZAR VISIBILIDAD DEL SIDEBAR MÓVIL ============================================================================ */ @media (max-width: 768px) { aside.sidebar, .sidebar { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 20px !important; box-sizing: border-box !important; } /* Logo más pequeño en móvil */ aside.sidebar .sidebar-logo, .sidebar .sidebar-logo { max-width: 120px !important; margin-bottom: 30px !important; } aside.sidebar .sidebar-logo img, .sidebar .sidebar-logo img { width: 100% !important; height: auto !important; max-width: 120px !important; } aside.sidebar .logo-text, .sidebar .logo-text { font-size: 16px !important; line-height: 1.2 !important; margin-bottom: 30px !important; } /* Navegación con más espacio */ aside.sidebar .sidebar-nav, .sidebar .sidebar-nav { margin-top: 20px !important; } aside.sidebar .sidebar-nav ul, .sidebar .sidebar-nav ul { padding: 0 !important; margin: 0 !important; } aside.sidebar .sidebar-nav li, .sidebar .sidebar-nav li { margin-bottom: 15px !important; } aside.sidebar .sidebar-nav a, .sidebar .sidebar-nav a { padding: 0px 0 !important; font-size: 14px !important; display: block !important; } /* Submenús con padding */ aside.sidebar .submenu, .sidebar .submenu { padding-left: 15px !important; margin-top: 5px !important; } aside.sidebar .submenu li, .sidebar .submenu li { margin-bottom: 8px !important; } aside.sidebar .submenu a, .sidebar .submenu a { font-size: 13px !important; padding: 5px 0 !important; } aside.sidebar.active, aside.sidebar.active[style*="opacity: 0"], aside.sidebar.active[style*="visibility: hidden"], .sidebar.active, .sidebar.active[style*="opacity: 0"], .sidebar.active[style*="visibility: hidden"] { opacity: 1 !important; visibility: visible !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateX(0) !important; z-index: 1001 !important; position: fixed !important; left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; padding: 20px !important; box-sizing: border-box !important; overflow-y: auto !important; } aside.sidebar.active *, .sidebar.active * { opacity: 1 !important; visibility: visible !important; } } /* ============================================================================ ESTILOS GLOBALES PARA SIDEBAR ACTIVO ============================================================================ */ aside.sidebar.active, .sidebar.active { opacity: 1 !important; visibility: visible !important; background: #ffffff !important; } /* ============================================================================ SIDEBAR RESPETANDO CONFIGURACIONES DEL CUSTOMIZER ============================================================================ */ /* Desktop: Aplicar estilos del customizer */ @media (min-width: 769px) { .sidebar { background: rgba(var(--sidebar-desktop-bg-rgb), var(--sidebar-desktop-transparency)) !important; } .sidebar[data-desktop-blur="true"] { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .sidebar[data-desktop-blur="false"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Móvil: Aplicar estilos del customizer */ @media (max-width: 768px) { .sidebar { background: rgba(var(--sidebar-mobile-bg-rgb), var(--sidebar-mobile-transparency)) !important; } .sidebar[data-mobile-blur="true"] { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .sidebar[data-mobile-blur="false"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ============================================================================ TOGGLE HAMBURGUESA UNIFICADO ============================================================================ */ @media (max-width: 768px) { .mobile-menu-toggle { display: block !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; top: 20px !important; right: 20px !important; z-index: 1002 !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 8px !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.3s ease !important; width: 40px !important; height: 40px !important; text-align: center !important; line-height: 24px !important; } .mobile-menu-toggle:hover { background: transparent !important; transform: none !important; } .mobile-menu-toggle:active { transform: none !important; } .mobile-menu-toggle .hamburger { width: 24px !important; height: 2px !important; background: #000000 !important; position: relative !important; transition: all 0.3s ease !important; display: block !important; margin: 0 auto !important; } .mobile-menu-toggle .hamburger::before, .mobile-menu-toggle .hamburger::after { content: "" !important; position: absolute !important; width: 24px !important; height: 2px !important; background: #000000 !important; transition: all 0.3s ease !important; left: 0 !important; } .mobile-menu-toggle .hamburger::before { top: -8px !important; } .mobile-menu-toggle .hamburger::after { bottom: -8px !important; } } @media (min-width: 769px) { .mobile-menu-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: -9999px !important; left: -9999px !important; z-index: -1 !important; } } .admin-bar .mobile-menu-toggle { top: 52px !important; } /* ============================================================================ TÍTULOS EN MÓVIL - MÁRGENES AUMENTADOS ============================================================================ */ @media (max-width: 768px) { /* Títulos principales */ h1, h2, h3, h4, h5, h6 { margin-top: 40px !important; margin-bottom: 30px !important; } /* Títulos de productos */ .single-product .product h1.product_title, .single-product .product .entry-title { margin-top: 50px !important; margin-bottom: 40px !important; } /* Títulos de WooCommerce */ .woocommerce h1.page-title, .woocommerce h1.woocommerce-products-header__title { margin-top: 45px !important; margin-bottom: 35px !important; } /* Títulos de pestañas */ .woocommerce-tabs h2, .woocommerce-tabs h3 { margin-top: 35px !important; margin-bottom: 25px !important; } /* Títulos relacionados */ .related h2 { margin-top: 40px !important; margin-bottom: 30px !important; } } /* ============================================================================ ESTILOS AGRESIVOS PARA SOBRESCRIBIR EL THEME PRINCIPAL ============================================================================ */ /* Layout de una sola columna - MÁS ESPECÍFICO */ body.single-product .single-product .product, .single-product .single-product .product { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; max-width: 800px !important; margin: 0 auto !important; padding: 20px !important; text-align: left !important; } /* Galería - AJUSTE MÍNIMO PARA OBJECT-FIT: COVER */ /* Galería manejada por galeria-esencial.css */ /* Summary - MÁS ESPECÍFICO */ body.single-product .single-product .product .summary, .single-product .single-product .product .summary { order: 2 !important; width: 100% !important; padding: 0 !important; text-align: left !important; } /* Título del producto - MÁS ESPECÍFICO */ body.single-product .single-product .product .product_title, .single-product .single-product .product .product_title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; text-align: left !important; margin-bottom: 20px !important; } /* Precio - MÁS ESPECÍFICO */ body.single-product .single-product .product .price, .single-product .single-product .product .price { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; text-align: left !important; margin-bottom: 0px !important; } /* Descripción - MÁS ESPECÍFICO */ body.single-product .single-product .product .woocommerce-product-details__short-description, .single-product .single-product .product .woocommerce-product-details__short-description { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #000000 !important; text-align: left !important; margin-bottom: 20px !important; } /* Cart - MÁS ESPECÍFICO */ body.single-product .single-product .product .cart, .single-product .single-product .product .cart { text-align: left !important; margin-bottom: 20px !important; display: block !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } /* Botón Add to Cart - MÁS ESPECÍFICO */ body.single-product .single-product .product .single_add_to_cart_button, .single-product .single-product .product .single_add_to_cart_button { color: #000000 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; background: #ffffff !important; border: 1px solid #000000 !important; padding: 12px 24px !important; border-radius: 0 !important; text-transform: none !important; font-weight: normal !important; transition: all 0.3s ease !important; box-shadow: none !important; outline: none !important; margin: 0 !important; display: inline-block !important; } body.single-product .single-product .product .single_add_to_cart_button:hover, .single-product .single-product .product .single_add_to_cart_button:hover { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; transform: none !important; box-shadow: none !important; } /* Quantity - MÁS ESPECÍFICO */ body.single-product .single-product .product .quantity, .single-product .single-product .product .quantity { text-align: left !important; margin: 0 0 10px 0 !important; display: block !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; padding: 10px !important; } /* Layout de dos columnas - MÁS ESPECÍFICO */ body.single-product .single-product .product-summary-grid, .single-product .single-product .product-summary-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; margin-top: 20px !important; width: 100% !important; } body.single-product .single-product .product-summary-left, .single-product .single-product .product-summary-left { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 20px !important; } body.single-product .single-product .product-summary-right, .single-product .single-product .product-summary-right { width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 20px !important; } /* ============================================================================ ESTILOS PARA SELECTOR DE VARIABLES/VARIACIONES ============================================================================ */ /* Contenedor de variaciones */ body.single-product .single-product .product .variations, .single-product .single-product .product .variations { margin-bottom: 20px !important; width: 100% !important; } /* Tabla de variaciones */ body.single-product .single-product .product .variations table, .single-product .single-product .product .variations table { width: 100% !important; border: none !important; margin: 0 !important; padding: 0 !important; } /* Filas de variaciones */ body.single-product .single-product .product .variations tr, .single-product .single-product .product .variations tr { border: none !important; background: transparent !important; margin-bottom: 15px !important; } /* Celdas de variaciones */ body.single-product .single-product .product .variations td, .single-product .single-product .product .variations td { border: none !important; padding: 8px 0 !important; vertical-align: middle !important; background: transparent !important; } /* Labels de variaciones */ body.single-product .single-product .product .variations label, .single-product .single-product .product .variations label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; font-size: 14px !important; margin: 0 !important; padding: 10px !important; display: block !important; margin-bottom: 8px !important; } /* Selectores de variaciones */ body.single-product .single-product .product .variations select, .single-product .single-product .product .variations select { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; background: #ffffff !important; border: 1px solid #000000 !important; padding: 10px 12px !important; border-radius: 0 !important; font-size: 14px !important; width: 100% !important; max-width: 200px !important; outline: none !important; transition: all 0.3s ease !important; cursor: pointer !important; } body.single-product .single-product .product .variations select:hover, .single-product .single-product .product .variations select:hover { border-color: #333333 !important; background: #f8f8f8 !important; } body.single-product .single-product .product .variations select:focus, .single-product .single-product .product .variations select:focus { border-color: #000000 !important; background: #ffffff !important; box-shadow: none !important; outline: none !important; } /* Opciones del selector */ body.single-product .single-product .product .variations select option, .single-product .single-product .product .variations select option { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; background: #ffffff !important; padding: 8px !important; } /* Reset de variaciones */ body.single-product .single-product .product .reset_variations, .single-product .single-product .product .reset_variations { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #666666 !important; background: transparent !important; border: none !important; padding: 5px 0 !important; font-size: 12px !important; text-decoration: underline !important; cursor: pointer !important; margin-top: 10px !important; display: inline-block !important; } body.single-product .single-product .product .reset_variations:hover, .single-product .single-product .product .reset_variations:hover { color: #000000 !important; background: transparent !important; } /* Contenedor de precio de variación */ body.single-product .single-product .product .woocommerce-variation-price, .single-product .single-product .product .woocommerce-variation-price { margin: 15px 0 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; } /* Contenedor de disponibilidad */ body.single-product .single-product .product .woocommerce-variation-availability, .single-product .single-product .product .woocommerce-variation-availability { margin: 10px 0 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; } /* Descripción de variación */ body.single-product .single-product .product .woocommerce-variation-description, .single-product .single-product .product .woocommerce-variation-description { margin: 15px 0 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; color: #000000 !important; font-size: 14px !important; line-height: 1.5 !important; } body.woocommerce-checkout .woocommerce-checkout input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; color: #000000 !important; background: #ffffff !important; border: 1px solid #000000 !important; padding: 10px 12px !important; border-radius: 0 !important; outline: none !important; } /* Total del carrito */ body.woocommerce-cart .woocommerce-cart .cart_totals, body.woocommerce-checkout .woocommerce-checkout .cart_totals { background: #ffffff !important; border: none !important; padding: 20px !important; margin-top: 30px !important; } /* Formulario de checkout */ body.woocommerce-checkout .woocommerce-checkout form { background: #ffffff !important; border: none !important; padding: 20px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Campos del formulario */ body.woocommerce-checkout .woocommerce-checkout input, body.woocommerce-checkout .woocommerce-checkout select, body.woocommerce-checkout .woocommerce-checkout textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; color: #000000 !important; background: #ffffff !important; border: 1px solid #000000 !important; padding: 10px 12px !important; border-radius: 0 !important; outline: none !important; width: 100% !important; box-sizing: border-box !important; } /* Labels del formulario */ body.woocommerce-checkout .woocommerce-checkout label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; color: #000000 !important; margin-bottom: 5px !important; display: block !important; } /* Botón específico "Proceder al checkout" */ body.woocommerce-cart .wc-proceed-to-checkout .checkout-button, body.woocommerce-cart .proceed-to-checkout .checkout-button, body.woocommerce-cart .checkout-button, body.woocommerce-cart .button.checkout-button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; padding: 12px 24px !important; border-radius: 0 !important; text-transform: none !important; transition: all 0.3s ease !important; box-shadow: none !important; outline: none !important; display: inline-block !important; text-decoration: none !important; } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover, body.woocommerce-cart .proceed-to-checkout .checkout-button:hover, body.woocommerce-cart .checkout-button:hover, body.woocommerce-cart .button.checkout-button:hover { background: #ffffff !important; color: #000000 !important; border-color: #000000 !important; transform: none !important; box-shadow: none !important; text-decoration: none !important; } /* Botón "Actualizar carrito" */ body.woocommerce-cart .woocommerce-cart-form .button[name="update_cart"], body.woocommerce-cart .woocommerce-cart-form input[name="update_cart"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 200 !important; font-size: 1rem !important; line-height: 1.5 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; padding: 12px 24px !important; border-radius: 0 !important; text-transform: none !important; transition: all 0.3s ease !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; } body.woocommerce-cart .woocommerce-cart-form .button[name="update_cart"]:hover, body.woocommerce-cart .woocommerce-cart-form input[name="update_cart"]:hover { background: #ffffff !important; color: #000000 !important; border-color: #000000 !important; transform: none !important; box-shadow: none !important; } /* ============================================================================ SIDEBAR OVERLAY ============================================================================ */ .sidebar-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 999 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; cursor: pointer !important; display: none !important; pointer-events: none !important; } .sidebar-overlay.active { opacity: 1 !important; visibility: visible !important; display: block !important; pointer-events: auto !important; } /* ============================================================================ HOME DESKTOP - SIN PADDING PARA SLIDER ============================================================================ */ body.home .content-area { padding: 0 !important; margin-left: 0px !important; width: calc(100% - 0px) !important; flex: none !important; /* No expandir para llenar espacio disponible */ height: auto !important; } body.home .home-slider { width: 100% !important; margin: 0 !important; padding: 0 !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } /* Asegurar que el slider mantenga su altura en todas las situaciones */ body.home .home-slider.slick-initialized, body.home .home-slider.slick-slider { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } body.home .home-slider.slick-slider .slick-list, body.home .home-slider.slick-slider .slick-track { height: 100% !important; } body.home .home-slider.slick-slider .slick-slide { height: 100% !important; } body.home .home-slider.slick-slider .slick-slide > div { height: 100% !important; } body.home .home-slider.slick-slider .slide { height: 100% !important; } /* ============================================================================ SIDEBAR HOME DESKTOP - TRANSPARENTE ============================================================================ */ body.home .sidebar { background: transparent !important; backdrop-filter: blur(0px) !important; -webkit-backdrop-filter: blur(0px) !important; } body.home .sidebar[style*="background"] { background: transparent !important; } body.home .sidebar[style*="backdrop-filter"] { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* ============================================================================ SIDEBAR MÓVIL - ESTILOS ULTRA AGRESIVOS ============================================================================ */ @media (max-width: 768px) { /* Sidebar por defecto en móvil (oculto) */ aside.sidebar, .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 1002 !important; opacity: 1 !important; visibility: visible !important; transform: translateX(-100%) !important; transition: transform 0.3s ease !important; padding: 20px !important; box-sizing: border-box !important; overflow-y: auto !important; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important; } /* Forzar sidebar activo - MÁXIMA PRIORIDAD */ aside.sidebar.active:not([style*="transform: translateX(-100%)"]), .sidebar.active:not([style*="transform: translateX(-100%)"]), aside.sidebar.active:not([style*="matrix(1, 0, 0, 1, -280, 0)"]), .sidebar.active:not([style*="matrix(1, 0, 0, 1, -280, 0)"]) { transform: translateX(0) !important; left: 0 !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; z-index: 1002 !important; position: fixed !important; width: 280px !important; height: 100vh !important; padding: 20px !important; box-sizing: border-box !important; overflow-y: auto !important; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important; display: block !important; pointer-events: auto !important; } /* Forzar visibilidad de todos los elementos dentro del sidebar activo */ aside.sidebar.active *, .sidebar.active * { opacity: 1 !important; visibility: visible !important; } /* Forzar sidebar cerrado cuando JavaScript lo indica */ aside.sidebar[style*="transform: translateX(-100%)"], .sidebar[style*="transform: translateX(-100%)"], aside.sidebar[style*="matrix(1, 0, 0, 1, -280, 0)"], .sidebar[style*="matrix(1, 0, 0, 1, -280, 0)"] { transform: translateX(-100%) !important; left: 0 !important; opacity: 1 !important; visibility: visible !important; z-index: 1002 !important; position: fixed !important; width: 280px !important; height: 100vh !important; padding: 20px !important; box-sizing: border-box !important; overflow-y: auto !important; display: block !important; pointer-events: none !important; } /* Override específico para cualquier conflicto */ body.sidebar-open aside.sidebar.active:not([style*="transform: translateX(-100%)"]), body.sidebar-open .sidebar.active:not([style*="transform: translateX(-100%)"]), body.sidebar-open aside.sidebar.active:not([style*="matrix(1, 0, 0, 1, -280, 0)"]), body.sidebar-open .sidebar.active:not([style*="matrix(1, 0, 0, 1, -280, 0)"]) { transform: translateX(0) !important; left: 0 !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; z-index: 1002 !important; } } /* ============================================================================ HOME MÓVIL - CONTENIDO A PANTALLA COMPLETA ============================================================================ */ @media (max-width: 768px) { body.home .content-area { padding: 0 !important; margin-left: 0px !important; width: calc(100% - 0px) !important; } body.home .home-slider { width: 100% !important; margin: 0 !important; padding: 0 !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } body.home .home-slider.slick-initialized, body.home .home-slider.slick-slider { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } body.home .home-slider.slick-slider .slick-list, body.home .home-slider.slick-slider .slick-track { height: 100% !important; } body.home .home-slider.slick-slider .slick-slide { height: 100% !important; } body.home .home-slider.slick-slider .slick-slide > div { height: 100% !important; } body.home .home-slider.slick-slider .slide { height: 100% !important; } body.home .site-main { margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; flex: none !important; } .page-content { padding: 25px !important; } } /* ============================================================================ FOOTER FIXED SOLO EN HOME ============================================================================ */ body.home .site-footer { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; margin: 0 !important; flex-shrink: 0 !important; /* NO sobrescribir padding, background, backdrop-filter - respetar customizer */ } /* ============================================================================ FOOTER EN OTRAS PÁGINAS - STICKY FOOTER (NO FIJO) ============================================================================ */ /* Footer en otras páginas: sticky footer que se mantiene en la parte inferior */ /* NOTA: Los estilos del sticky footer se manejan en la sección superior */ /* Desktop: Footer fijo con margen para sidebar */ @media (min-width: 769px) { body.home .site-footer { left: 230px !important; width: calc(100% - 230px) !important; margin-left: 0 !important; } /* Footer en otras páginas - sticky footer con ancho correcto */ body:not(.home) .site-footer { width: calc(100% - 230px) !important; margin-left: 0 !important; } } /* Móvil: Footer fijo sin margen */ @media (max-width: 768px) { body.home .site-footer { left: 0 !important; width: 100% !important; margin-left: 0 !important; } /* Footer en otras páginas - sticky footer en móvil */ body:not(.home) .site-footer { width: 100% !important; margin-left: 0 !important; } } /* ============================================================================ OVERLAY MÓVIL - ASEGURAR CLICKEABLE ============================================================================ */ @media (max-width: 768px) { .sidebar-overlay { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 999 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; cursor: pointer !important; pointer-events: none !important; } .sidebar-overlay.active { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 999 !important; } /* Asegurar que el overlay no interfiera cuando no está activo */ .sidebar-overlay:not(.active) { display: none !important; pointer-events: none !important; z-index: -1 !important; opacity: 0 !important; visibility: hidden !important; } /* Regla adicional para móvil - overlay completamente oculto */ body:not(.sidebar-open) .sidebar-overlay { display: none !important; pointer-events: none !important; z-index: -1 !important; } } /* ============================================================================ BOTÓN CERRAR SIDEBAR - SOLO MÓVIL ============================================================================ */ .sidebar-close { display: none !important; /* Oculto por defecto en desktop */ } @media (max-width: 768px) { .sidebar-close { display: flex !important; /* Solo visible en móvil */ position: absolute !important; top: 15px !important; right: 15px !important; width: 30px !important; height: 30px !important; background: transparent !important; border: none !important; font-size: 24px !important; color: #000000 !important; cursor: pointer !important; z-index: 1003 !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: all 0.3s ease !important; } .sidebar-close:hover { background: rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } } /* ============================================================================ AJUSTE DE MARGEN PARA PRODUCT SUMMARY SECTION ============================================================================ */ .product-summary-section { margin-top: 20px !important; } @media (max-width: 768px) { .product-summary-section { margin-top: 5px !important; } } /* ============================================================================ AJUSTE DE MARGEN PARA SINGLE PRODUCT ============================================================================ */ .single-product { margin-top: 10px !important; } @media (max-width: 768px) { .single-product { margin-top: 50px !important; } } span.cart-count { padding-left: 10px; color: #ec0000 !important; } .woocommerce-shop { margin-top: 0px; } /* ============================================================================ TAMAÑO DEL LOGO - SOBRESCRIBIR ESTILOS CONFLICTIVOS ============================================================================ */ /* Logo del sidebar - Forzar tamaño del customizer */ .sidebar .sidebar-logo .logo-image, .sidebar-logo .logo-image, .sidebar .logo-image { width: var(--sidebar-logo-width, 130px) !important; max-width: var(--sidebar-logo-width, 130px) !important; height: auto !important; min-width: var(--sidebar-logo-width, 130px) !important; min-height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* Logo móvil - Forzar tamaño del customizer */ .mobile-logo .logo-image, .mobile-logo img.logo-image { width: var(--mobile-logo-width, 80px) !important; max-width: var(--mobile-logo-width, 80px) !important; height: auto !important; min-width: var(--mobile-logo-width, 80px) !important; min-height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* Contenedores de logos */ .sidebar-logo, .sidebar .sidebar-logo { width: auto !important; max-width: none !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .mobile-logo { width: auto !important; max-width: none !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .page-content { padding: 25px 200px 25px 25px; } .checkout-page-wrapper { padding: 10px; } .woocommerce-info::before { display: none; } /* ============================================================================ OCULTAR MENSAJES DUPLICADOS EN CHECKOUT - TEMPORALMENTE DESHABILITADO ============================================================================ */ /* .checkout-shipping-notice:first-of-type, .checkout-shipping-notice-alt:first-of-type, .checkout-shipping-notice-js:first-of-type { display: block !important; } .checkout-shipping-notice:nth-of-type(n+2), .checkout-shipping-notice-alt:nth-of-type(n+2), .checkout-shipping-notice-js:nth-of-type(n+2) { display: none !important; } */ .woocommerce table.shop_table tfoot th { font-weight: 300; border-top: 0px solid rgba(0, 0, 0, .1); } .woocommerce table.shop_table tfoot td{ font-weight: 300; border-top: 0px solid rgba(0, 0, 0, .1); } h1.woocommerce-products-header__title { margin-bottom: 15px; } header.entry-header { margin-bottom: 15px; } /* ============================================================================ BOTÓN DE CHECKOUT WOOCOMMERCE BLOCKS ============================================================================ */ button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained { background: #000 !important; color: #fff !important; } .wc-block-components-checkout-place-order-button__text { color: #fff !important; }