/** * Precio Personalizado para WooCommerce — Frontend Styles * v2: refactor para integrar con templates de producto (sin caja gris, * input prominente con prefix de moneda integrado). */ /* Wrapper limpio: sin caja gris, sin borde — se integra con el flow del sidebar/summary del producto. */ .pp-custom-price-wrapper { margin: 18px 0 22px; padding: 0; background: transparent; border: none; border-radius: 0; } /* Label con jerarquía visual elevada — actúa como "encabezado de precio" en sidebars de cursos/capacitaciones (sustituye al precio que ocultamos). */ .pp-custom-price-label { display: block; font-weight: 700; margin: 0 0 10px; font-size: 1.05em; color: inherit; letter-spacing: -0.01em; line-height: 1.2; } /* Input + prefix de moneda como un solo bloque visual usando el patrón "input grouped" estándar de Bootstrap/Tailwind. Borde único alrededor, sin línea divisoria entre el símbolo y el número. */ .pp-custom-price-input-wrapper { display: flex; align-items: stretch; width: 100%; max-width: 280px; border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pp-custom-price-input-wrapper:focus-within { border-color: currentColor; box-shadow: 0 0 0 3px rgba(149, 28, 41, 0.15); /* tinte CICP */ } .pp-currency-symbol { display: inline-flex; align-items: center; padding: 0 12px; background: transparent; border: none; border-radius: 0; font-weight: 600; font-size: 1em; color: #6b7280; user-select: none; border-right: 1px solid #e5e7eb; } .pp-custom-price-input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 12px 14px; border: none; background: transparent; border-radius: 0; font-size: 1.05em; font-weight: 600; color: #111827; line-height: 1.4; -moz-appearance: textfield; } .pp-custom-price-input::-webkit-outer-spin-button, .pp-custom-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pp-custom-price-input:focus { outline: none; box-shadow: none; } /* Info de rango / sugerido: discreta, debajo del input. */ .pp-price-range-info, .pp-suggested-price-info { margin: 8px 0 0; font-size: 0.85em; color: #6b7280; line-height: 1.4; } .pp-suggested-price-info { color: #951c29; /* color CICP */ font-style: normal; } /* Ocultar el badge "¡GRATIS!" / "Free!" cuando hay precio personalizado activo. El JS añade .pp-custom-price-active al ; aquí cubrimos casos donde el precio se renderiza FUERA de .woocommerce-variation-price (sidebars custom, widgets de plantillas educativas, etc.). */ body.pp-custom-price-active .woocommerce-variation-price, body.pp-custom-price-active .woocommerce-variation-price .price, body.pp-custom-price-active .woocommerce-variation-price .amount { display: none !important; } /* Templates educativos (mep-* del plugin Masteriyo/menarve-education plan): ocultar el bloque de precio gigante del sidebar cuando la variación seleccionada es personalizable — su precio "general" ya no aplica y competía visualmente con el campo "Aporte". */ body.pp-custom-price-active .mep-price-block, body.pp-custom-price-active .mep-price-current, body.pp-custom-price-active .mep-price-old, body.pp-custom-price-active .mep-installments-info, body.pp-custom-price-active .price-installments-info { display: none !important; } /* Responsive */ @media (max-width: 480px) { .pp-custom-price-input-wrapper { max-width: 100%; } .pp-custom-price-input { padding: 11px 12px; font-size: 1em; } .pp-currency-symbol { padding: 0 10px; } }