/* Metacrilato Gestor — BOTONES (bloque I, 14-09-2026). Una sola geometría para todos los botones de la web, gobernada por dos valores de Apariencia → Botones: --mc-icono-boton tamaño del icono (círculo que lo circunscribe) --mc-btn-margen margen del icono: al borde arriba, abajo e izquierda --mc-btn-margen-texto margen del texto: del icono al texto y del texto al borde derecho (sin icono: a ambos lados) De ahí se derivan (en :root, no editables): --mc-btn-alto = icono + 2·margen del icono --mc-radio-pildora = alto / 2 → el icono queda concéntrico con el semicírculo izquierdo de la píldora --mc-icono-glifo = icono / √2 → los iconos que no son redondos se encogen para quedar inscritos en el círculo Tres tipos: principal (píldora oscura), secundario (píldora con borde) y enlace (texto subrayado). Cada botón de la web se asigna a uno de ellos por su selector, aquí; las hojas de cada página solo deciden dónde va. Se carga en todas las páginas, después de las hojas de página. */ /* ---------- PRINCIPAL: píldora oscura ---------- 27-09-2026: también «Acceso» y «Registrarse» de Mi cuenta sin sesión. */ .mc-btn-pill, .mc-od .mc-btn-pill, .mc-od .mc-btn-danger, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .mc-cart-vacio .return-to-shop a.button, .woocommerce-checkout .mc-co-submit #place_order, .woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit, .woocommerce-account .mc-btn, .woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-MyAccount-content button[type=submit]:not(.mc-daddr-link):not([name="save_account_details"]):not([name="save_address"]), .woocommerce-account .woocommerce-MyAccount-content button.mc-daddr-save, .metacrilato-pdf-download-btn, /* ---------- SECUNDARIO: píldora con borde (comparte geometría) ---------- */ .woocommerce-account .mc-vo-close { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--mc-btn-margen-texto); box-sizing: border-box; width: auto; height: var(--mc-btn-alto); min-height: 0; margin: 0; padding: 0 var(--mc-btn-margen-texto) 0 var(--mc-btn-margen); border: 0; border-radius: var(--mc-radio-pildora); background: var(--mc-boton); color: var(--mc-boton-texto); font-size: var(--mc-fs-compacto); font-weight: var(--mc-peso-fuerte); line-height: 1; text-decoration: none; text-transform: none; white-space: nowrap; box-shadow: none; float: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .mc-btn-pill:hover, .mc-od .mc-btn-pill:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .mc-cart-vacio .return-to-shop a.button:hover, .woocommerce-checkout .mc-co-submit #place_order:hover, .woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit:hover, .woocommerce-account .mc-btn:hover, .woocommerce-account .woocommerce-MyAccount-content .button:hover, .woocommerce-account .woocommerce-MyAccount-content button[type=submit]:not(.mc-daddr-link):not([name="save_account_details"]):not([name="save_address"]):hover, .woocommerce-account .woocommerce-MyAccount-content button.mc-daddr-save:hover, .metacrilato-pdf-download-btn:hover { background: var(--mc-boton-hover); color: var(--mc-boton-texto); } /* Sin icono: margen del texto a ambos lados. */ .mc-od .mc-btn-pill, .mc-od .mc-btn-danger, .woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register .woocommerce-form-register__submit, .woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-MyAccount-content button[type=submit]:not(.mc-daddr-link):not([name="save_account_details"]):not([name="save_address"]), .woocommerce-account .woocommerce-MyAccount-content button.mc-daddr-save, .woocommerce-account .mc-vo-close { padding: 0 var(--mc-btn-margen-texto); } /* Variantes de color del principal. */ .mc-od .mc-btn-danger { background: var(--mc-error); } .mc-od .mc-btn-danger:hover { background: var(--mc-error); } .woocommerce-account .mc-btn-pay { background: var(--mc-ok); } .woocommerce-account .mc-btn-pay:hover { background: var(--mc-ok-oscuro); } .woocommerce-account .mc-btn-cancel { background: var(--mc-error); } .woocommerce-account .mc-btn-cancel:hover { background: var(--mc-error); } /* Secundario: fondo claro y borde. */ .woocommerce-account .mc-vo-close, .woocommerce-account .mc-btn.mc-btn-sec { background: var(--mc-fondo); color: var(--mc-texto); border: 1px solid var(--mc-borde-campo); } .woocommerce-account .mc-vo-close:hover, .woocommerce-account .mc-btn.mc-btn-sec:hover { background: var(--mc-fondo-hover); color: var(--mc-texto); border-color: var(--mc-borde-campo); } /* ---------- ICONO dentro de la píldora: círculo de --mc-icono-boton ---------- */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before, .woocommerce-cart .mc-cart-vacio .return-to-shop a.button::before, .woocommerce-checkout .mc-co-submit #place_order::before, .woocommerce-account .mc-btn .mc-ico, .metacrilato-pdf-download-btn .mc-legal-pdf-ico, .mc-e404 .mc-e404-ico { content: ""; position: static; transform: none; display: inline-block; flex: 0 0 auto; box-sizing: border-box; width: var(--mc-icono-boton); height: var(--mc-icono-boton); margin: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* Glifo inscrito en el círculo: la caja mide el diámetro, el dibujo se pinta (contain, sin deformar) dentro del cuadrado inscrito. */ padding: calc((var(--mc-icono-boton) - var(--mc-icono-glifo)) / 2); /* El margen del texto se mide desde el dibujo, no desde el círculo: se descuenta a la derecha el hueco entre el cuadrado inscrito y el círculo. */ margin-right: calc((var(--mc-icono-glifo) - var(--mc-icono-boton)) / 2); -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; -webkit-mask-size: contain; mask-size: contain; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before { -webkit-mask-image: var(--mc-ico-cart-finalizar); mask-image: var(--mc-ico-cart-finalizar); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after { display: none; } .woocommerce-cart .mc-cart-vacio .return-to-shop a.button::before { -webkit-mask-image: var(--mc-ico-cart-volver-tienda); mask-image: var(--mc-ico-cart-volver-tienda); } .woocommerce-checkout .mc-co-submit #place_order::before { -webkit-mask-image: var(--mc-ico-co-realizar); mask-image: var(--mc-ico-co-realizar); } .woocommerce-checkout .mc-co-submit #place_order[data-pm="bacs"]::before { -webkit-mask-image: var(--mc-ico-pm-bacs-btn); mask-image: var(--mc-ico-pm-bacs-btn); } .woocommerce-checkout .mc-co-submit #place_order[data-pm="paypal"]::before { -webkit-mask-image: var(--mc-ico-pm-paypal-btn); mask-image: var(--mc-ico-pm-paypal-btn); } .woocommerce-checkout .mc-co-submit #place_order[data-pm="redsys"]::before { -webkit-mask-image: var(--mc-ico-pm-redsys-btn); mask-image: var(--mc-ico-pm-redsys-btn); } .woocommerce-checkout .mc-co-submit #place_order[data-pm="mc_bizum"]::before { -webkit-mask-image: var(--mc-ico-pm-mc-bizum-btn); mask-image: var(--mc-ico-pm-mc-bizum-btn); } /* Página no encontrada: icono de Textos e iconos → Página no encontrada. */ .mc-e404 .mc-e404-ico { -webkit-mask-image: var(--mc-ico-e404-boton); mask-image: var(--mc-ico-e404-boton); } /* Botón de PDF de las páginas legales: icono de Textos e iconos → Páginas legales. */ .metacrilato-pdf-download-btn .mc-legal-pdf-ico { -webkit-mask-image: var(--mc-ico-legal-pdf); mask-image: var(--mc-ico-legal-pdf); } /* ---------- Colocación: los botones anchos pasan a ancho de contenido, centrados ---------- */ .woocommerce-cart .wc-proceed-to-checkout, .woocommerce-checkout .mc-co-submit { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ---------- ENLACE: texto subrayado ---------- */ .mc-od .mc-btn-ghost, .woocommerce-cart .wc-proceed-to-checkout a.metacrilato-budget-btn, .woocommerce-cart .mc-cart-actions button[name="update_cart"], .woocommerce-account .mc-daddr-link { background: none; border: 0; padding: 0; color: var(--mc-texto); text-decoration: underline; font-size: var(--mc-fs-compacto); font-weight: var(--mc-peso-fuerte); cursor: pointer; } .mc-od .mc-btn-ghost:hover, .woocommerce-cart .wc-proceed-to-checkout a.metacrilato-budget-btn:hover, .woocommerce-cart .mc-cart-actions button[name="update_cart"]:hover, .woocommerce-account .mc-daddr-link:hover { color: var(--mc-enlace); background: none; } /* Enlaces que WooCommerce pinta como