/** * Checkout: pantalla de eleccion entre invitado y cuenta. * * POR QUE EXISTE ESTA HOJA * Los colores, radios, tipografias y espaciados se configuran desde el panel * de Bricks, elemento por elemento. Aqui queda solo lo que ningun control * expone: el alto de viewport, el estado que tapa el checkout, el separador * entre las dos columnas y los estados del boton nativo de WooCommerce. * * Cero valores de color literales: todo se consume por variable. */ /* ------------------------------------------------------------------ */ /* El estado vive en el body */ /* ------------------------------------------------------------------- * Mientras el cliente no elige, el checkout esta oculto. El estado va en una * clase del y no en un selector de hermano general: aquel dependia del * orden del DOM y se rompia en silencio al mover un contenedor en el builder. * ------------------------------------------------------------------ */ body.wist-checkout-eligiendo #ab-checkout-billing-wrap, body.wist-checkout-eligiendo #ab-checkout-payment-wrap { display: none; } /* NO se bloquea el scroll de la pagina. * * Antes habia un overflow:hidden en el body para que la pantalla se sintiera * a viewport completo. Traia dos problemas: el pie quedaba inalcanzable, y en * teleono el bloqueo mas un contenedor con scroll propio dentro son dos * contextos de desplazamiento anidados, que se sienten como un iframe. * * La pantalla sigue ocupando el viewport por su min-height, pero la pagina se * desplaza entera y con un solo gesto, y se llega al pie. */ /* En movil la pantalla no fuerza el alto: fluye con su contenido. */ @media (max-width: 767px) { #ab-login-choice { min-height: 0; } } #ab-login-choice[hidden] { display: none; } /* ------------------------------------------------------------------ */ /* Alto de viewport */ /* ------------------------------------------------------------------- * 100svh y no 100vh: en moviles, vh mide contra la ventana con la barra de * direcciones retraida, asi que al cargar la pantalla queda mas alta que lo * visible y el contenido de abajo nace fuera de cuadro. svh mide contra el * estado visible mas pequeno, que es el que hay al entrar. * ------------------------------------------------------------------ */ #ab-login-choice { min-height: 100svh; min-height: 100dvh; } /* El alto ya no se fuerza al viewport. * * Ese min-height existia para sostener la pantalla completa con el body * bloqueado. Retirado el bloqueo, lo unico que hacia era generar hueco muerto * en escritorio: con el contenido en unos 500 px y una pantalla de 900, se * quedaban 400 px vacios antes del pie. * * Se deja un suelo modesto para que la pantalla siga teniendo presencia y no * se lea como un bloque suelto en medio de la pagina, pero sin forzar nada. */ @supports (min-height: 100svh) { #ab-login-choice { min-height: min(60svh, 520px); } } /* ------------------------------------------------------------------- * Alineacion de los dos botones * * La mitad de la cuenta tiene tres hijos (boton, frase y panel plegado) y la * de invitado dos. Con el mismo row-gap, la izquierda mide un gap mas de alto, * y como la fila centra verticalmente, su boton subia medio gap respecto al * otro. El panel plegado mide cero, pero su separacion no. * * Se cancela esa separacion mientras el panel este cerrado. Al abrirlo vuelve, * que es cuando si hace falta, y la mitad de invitado se centra contra la * columna crecida, que es el comportamiento pedido. * ------------------------------------------------------------------ */ #ab-login-choice .wist-panel-acceso:not(.is-open) { margin-top: calc(-1 * var(--wist-space-150)); } /* ------------------------------------------------------------------ */ /* Separador entre las dos mitades */ /* ------------------------------------------------------------------- * Una linea de un pixel entre dos opciones de igual peso. No es un acento * lateral de un bloque, que el master prohibe, sino la division entre dos * mitades, asi que se dibuja como elemento propio y no como borde de una. * ------------------------------------------------------------------ */ .wist-choice-divider { align-self: stretch; flex: none; width: 1px; background: var(--wist-border-decorative); } /* Apiladas, la linea pasa a horizontal. */ @media (max-width: 991px) { .wist-choice-divider { align-self: auto; width: 100%; height: 1px; } } /* Al elegir invitado el foco se mueve al contenedor del formulario, para que no se pierda en el body al ocultarse el boton. Es un destino programatico, no una parada de tabulacion, asi que no dibuja anillo. */ .woocommerce-billing-fields:focus, #ab-checkout-billing-wrap:focus { outline: none; } /* ------------------------------------------------------------------ */ /* Volver a elegir */ /* ------------------------------------------------------------------ */ .wist-volver-a-elegir { display: inline-flex; align-items: center; gap: var(--wist-space-100); min-height: 44px; color: var(--wist-ink-secondary); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Variante destacada: vive al principio de la seccion, encima de las * tarjetas, y es la unica salida de vuelta a la eleccion. En tinta secundaria * y dentro de la tarjeta pasaba desapercibida. */ .wist-volver-a-elegir--destacado { align-self: flex-start; margin-bottom: var(--wist-space-200); padding: 8px 14px; border-radius: var(--wist-radius-lg); background: transparent; box-shadow: inset 0 0 0 1px var(--wist-border-interactive); color: var(--wist-blue-base); font-weight: 500; text-decoration: none; transition: background-color 0.15s ease; } .wist-volver-a-elegir--destacado::before { content: "\2190"; font-size: 1.125rem; line-height: 1; } .wist-volver-a-elegir--destacado:hover { background: var(--wist-surface); color: var(--wist-blue-base-hover); } .wist-volver-a-elegir:hover { color: var(--wist-ink-primary); } .wist-volver-a-elegir:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } body.wist-checkout-eligiendo .wist-volver-a-elegir { display: none; } /* ------------------------------------------------------------------ */ /* Los dos botones de la eleccion */ /* ------------------------------------------------------------------- * Miden igual y se distinguen por el relleno. Invitado es la accion primaria * de la pantalla, porque continuar la compra es lo que la tienda quiere que * pase. La cuenta se ofrece por su beneficio, sin empujar. * * No se resuelve con el control de estilo del boton de Bricks porque los dos * tienen que medir exactamente lo mismo y compartir estados, y el contorno va * como sombra interior para no sumar al alto. * ------------------------------------------------------------------ */ #ab-login-choice .wist-choice-btn, #ab-login-choice .woocommerce-form-login__submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; padding: 14px 30px; border: 0; border-radius: var(--wist-radius-lg); font-family: Inter, system-ui, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 24px; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } /* Invitado: accion primaria. */ #ab-login-choice .wist-choice-btn--guest { background: var(--wist-blue-base); color: var(--wist-blue-on); } #ab-login-choice .wist-choice-btn--guest:hover { background: var(--wist-blue-base-hover); } /* Cuenta: mismo tamano, contorno en vez de relleno. */ #ab-login-choice .wist-choice-btn--cuenta { background: transparent; box-shadow: inset 0 0 0 1px var(--wist-border-interactive); color: var(--wist-ink-primary); } #ab-login-choice .wist-choice-btn--cuenta:hover { background: var(--wist-surface); } #ab-login-choice .wist-choice-btn:active, #ab-login-choice .woocommerce-form-login__submit:active { transform: scale(0.97); } #ab-login-choice .wist-choice-btn:focus-visible, #ab-login-choice .woocommerce-form-login__submit:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } /* ------------------------------------------------------------------ */ /* Panel de acceso plegable */ /* ------------------------------------------------------------------- * El desplegable nativo del elemento no sirve. Su control "Toggleable form" * pinta un disparador cuyo clic escucha WooCommerce en checkout.js, y ese * manejador busca "form.login, form.woocommerce-form--login". El elemento de * Bricks no emite ningun formulario: emite un div.login-div, porque toda la * plantilla ya vive dentro del

y un formulario dentro * de otro no existe en HTML. El disparador nativo no encuentra nada que * desplegar, asi que el plegado lo hacemos aqui. * * Se anima con grid-template-rows y no con height, que no interpola desde * auto, ni con max-height, que obliga a inventar un tope y descuadra la * duracion cuando el contenido es mas corto. * ------------------------------------------------------------------ */ /* Las frases de apoyo acompanan a su boton y comparten el eje centrado de la cabecera. Alineadas a la izquierda se leian como parrafos sueltos. */ #ab-login-choice .brxe-text-basic { text-align: center; } .wist-panel-acceso { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; } .wist-panel-acceso > * { overflow: hidden; min-height: 0; } .wist-panel-acceso.is-open { grid-template-rows: 1fr; } /* ------------------------------------------------------------------ */ /* Formulario de acceso */ /* ------------------------------------------------------------------- * El elemento de Bricks trae fondo propio con var(--bricks-bg-light), un * color fijo sin variante oscura, declarado en su hoja dentro de @layer * bricks. En modo oscuro el panel se quedaba claro y las etiquetas, que si * responden a los tokens, desaparecian sobre el. Se redeclara aqui con la * superficie del sistema. Cualquier regla nuestra le gana sin esfuerzo por * estar fuera de la capa. * ------------------------------------------------------------------ */ #ab-login-choice .login-div { gap: var(--wist-space-300); margin-top: var(--wist-space-200); padding: var(--wist-space-400); border-radius: var(--wist-radius-lg); background: var(--wist-surface); box-shadow: inset 0 0 0 1px var(--wist-border-decorative); } /* La hoja de Bricks solo declara flex para la variante "default" del bloque de credenciales. Con la variante "stack", que es la que usa esta pantalla, el contenedor se queda en block y el gap no llega a aplicarse: la etiqueta de la contrasena quedaba pegada al campo anterior. */ #ab-login-choice .login-div .credential { display: flex; flex-direction: column; gap: var(--wist-space-300); } /* Las etiquetas de este elemento no pasan por el selector de formularios de WooCommerce, que es el que estiliza el resto del checkout, porque no hay ningun .form-row de por medio. */ #ab-login-choice .login-div label { display: block; margin-bottom: var(--wist-space-100); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.5; } #ab-login-choice .login-div .required { color: var(--wist-ink-secondary); } /* El tope global de 24 rem para campos de una linea deja el campo mas corto que el panel, y el icono de mostrar contrasena, que se posiciona contra el borde de su envoltorio, caia fuera del campo. Dentro del panel el campo ocupa el ancho disponible, que ya esta acotado por el propio panel. */ #ab-login-choice .login-div input:not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 100%; } #ab-login-choice .login-div .password-input { display: block; position: relative; } #ab-login-choice .login-div .show-password-input { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; padding: 0; border: 0; background: transparent; color: var(--wist-ink-secondary); cursor: pointer; } /* Recordar la sesion: casilla y su texto en una sola linea. */ #ab-login-choice .login-div .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--wist-space-100); margin: 0; color: var(--wist-ink-secondary); font-size: 0.875rem; font-weight: 400; cursor: pointer; } /* El radio de 18 px que los Theme Styles dan a los campos alcanza tambien a la casilla, y sobre una caja de 18 px la deja redonda, con forma de opcion unica. Se devuelve al radio de casilla del sistema. */ #ab-login-choice .login-div .woocommerce-form-login__rememberme input { width: 1.125rem; height: 1.125rem; margin: 0; border-radius: 0.375rem; accent-color: var(--wist-blue-base); } /* El acceso es la accion de este panel, asi que va en relleno. La jerarquia entre invitado y cuenta ya se resolvio arriba, entre los dos botones. */ #ab-login-choice .woocommerce-form-login__submit { background: var(--wist-blue-base); color: var(--wist-blue-on); } #ab-login-choice .woocommerce-form-login__submit:hover { background: var(--wist-blue-base-hover); } #ab-login-choice .login-div .lost_password { margin: 0; text-align: center; } #ab-login-choice .login-div .lost_password a { color: var(--wist-ink-secondary); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; } #ab-login-choice .login-div .lost_password a:hover { color: var(--wist-ink-primary); } @media (prefers-reduced-motion: reduce) { .wist-panel-acceso { transition: none; } #ab-login-choice .wist-choice-btn, #ab-login-choice .woocommerce-form-login__submit { transition: none; } #ab-login-choice .wist-choice-btn:active, #ab-login-choice .woocommerce-form-login__submit:active { transform: none; } } /* ================================================================== */ /* Checkout: el resto de la pantalla */ /* ================================================================== */ /* ------------------------------------------------------------------ */ /* Titulos de seccion */ /* ------------------------------------------------------------------ */ #ab-checkout-billing-wrap h3 { margin: 0 0 var(--wist-space-300); font-family: Outfit, sans-serif; font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--wist-ink-primary); } /* ------------------------------------------------------------------ */ /* Desplegables de pais y provincia */ /* ------------------------------------------------------------------- * WooCommerce trae su propio borde y radio para estos dos, y le gana al * estilo de formulario del sitio. Quedaban cuadrados y con un gris ajeno * mientras el resto de los campos ya estaba conformado. * * El contorno va como sombra interior, igual que en el resto del sistema: un * borde de 1 px sumaria 2 px al alto y los dejaria 2 px mas altos que los * campos de texto de al lado. * ------------------------------------------------------------------ */ #ab-checkout-billing-wrap select, #ab-checkout-billing-wrap .select2-selection, #ab-checkout-billing-wrap .selectWoo + .select2 .select2-selection { box-sizing: border-box; min-height: 2.75rem; padding: 10px 40px 10px 14px; border: none; box-shadow: inset 0 0 0 1px var(--wist-border-decorative); border-radius: var(--wist-radius-lg); background-color: var(--wist-surface); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 24px; } /* select2 dibuja su propio texto y su propia flecha dentro del contenedor. */ #ab-checkout-billing-wrap .select2-selection__rendered { padding: 0; line-height: 24px; color: var(--wist-ink-primary); } #ab-checkout-billing-wrap .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); } /* ------------------------------------------------------------------ */ /* Resumen del pedido */ /* ------------------------------------------------------------------- * WooCommerce lo renderiza como shop_table y su hoja dibuja un borde por * CELDA, asi que sin neutralizarlo el resumen se lee como una hoja de * calculo: rejilla completa, lineas verticales incluidas. * * Aqui la tabla se reduce a lo que de verdad es, una lista de lineas: sin * bordes propios, con una separacion de un pixel por fila y la miniatura del * producto al inicio. La miniatura la agrega el tema hijo por el filtro * woocommerce_cart_item_name. * ------------------------------------------------------------------ */ .woocommerce-checkout-review-order-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; } /* Ninguna celda dibuja borde. Las lineas las pone la fila. */ .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table tr { border: 0; } /* Solo el encabezado de la tabla lleva versalitas. Las etiquetas del pie (Subtotal, Envio, Total) son texto de fila, no encabezados de columna, y con el mismo tratamiento quedaban ilegibles y fuera de jerarquia. */ .woocommerce-checkout-review-order-table thead th { padding: 0 0 12px; font-family: Inter, system-ui, sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; text-align: left; color: var(--wist-ink-secondary); } .woocommerce-checkout-review-order-table thead th:last-child { text-align: right; } /* Linea de producto: miniatura, nombre y cantidad a la izquierda, importe a la derecha. */ .woocommerce-checkout-review-order-table .cart_item td { padding: 12px 0; vertical-align: middle; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.4; color: var(--wist-ink-primary); } .woocommerce-checkout-review-order-table .cart_item { box-shadow: inset 0 -1px 0 var(--wist-border-hairline); } /* El flex vive en un envoltorio dentro de la celda, no en la celda. * Un td con display:flex deja de ser celda de tabla, y con el la columna del * importe deja de existir: el precio de la linea se colocaba justo detras del * nombre mientras Subtotal, Envio y Total se alineaban al borde derecho, que * es la desalineacion que se veia. */ .wist-review-line { display: flex; align-items: center; gap: var(--wist-space-150); } .woocommerce-checkout-review-order-table td.product-name { width: 100%; } .wist-review-thumb { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--wist-radius-xs); background: var(--wist-canvas); } .wist-review-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .wist-review-name { flex: 1 1 auto; min-width: 0; } .woocommerce-checkout-review-order-table .product-quantity { flex: none; color: var(--wist-ink-secondary); font-weight: 400; white-space: nowrap; } .woocommerce-checkout-review-order-table td.product-total { /* width 1% con nowrap: la celda se encoge a su contenido y el resto del ancho se lo queda el nombre, que es lo que hace que este importe caiga en la misma columna que los del pie. */ width: 1%; text-align: right; white-space: nowrap; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; color: var(--wist-ink-primary); font-variant-numeric: tabular-nums; } /* Pie: subtotal, envio y total. */ .woocommerce-checkout-review-order-table tfoot th { padding: 12px 0; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left; color: var(--wist-ink-secondary); } .woocommerce-checkout-review-order-table tfoot td { padding: 12px 0; text-align: right; white-space: nowrap; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--wist-ink-primary); } .woocommerce-checkout-review-order-table tfoot .cart-subtotal, .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals { box-shadow: inset 0 -1px 0 var(--wist-border-hairline); } /* El envio llega como lista con un input oculto y su etiqueta. Con una sola opcion no hay nada que elegir: se lee como dato, no como control. */ .woocommerce-checkout-review-order-table .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; } .woocommerce-checkout-review-order-table .woocommerce-shipping-methods label { font-weight: 500; color: var(--wist-ink-primary); cursor: default; } /* Total: la cifra manda, el impuesto incluido es una nota. */ .woocommerce-checkout-review-order-table tfoot .order-total th { padding-top: 16px; font-size: 1.0625rem; font-weight: 500; color: var(--wist-ink-primary); } .woocommerce-checkout-review-order-table tfoot .order-total td { padding-top: 16px; font-size: 1.375rem; font-weight: 600; } .woocommerce-checkout-review-order-table tfoot .order-total .includes_tax { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--wist-ink-secondary); } /* ------------------------------------------------------------------ */ /* Casillas del checkout */ /* ------------------------------------------------------------------- * La regla global de etiquetas excluye a proposito a la de casilla, porque * esta se compone en linea con su control. Pero nadie hacia esa composicion, * asi que la etiqueta caia en la tipografia por defecto y salia en Outfit 700, * con pinta de titular y ocupando tres lineas de alto para un texto de una. * ------------------------------------------------------------------ */ .woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: var(--wist-space-100); min-height: 44px; margin: 0; cursor: pointer; } .woocommerce-checkout .woocommerce-form__label-for-checkbox span { display: inline; font-family: Inter, system-ui, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--wist-ink-primary); } /* La fila ya la separa el bloque que la contiene. */ .woocommerce-checkout .woocommerce-account-fields .create-account { margin-bottom: 0; } /* El bloque de envio llegaba con 60 px de margen superior, fuera de la escala y muy por encima del salto de grupo a grupo, que es 48. */ .woocommerce-checkout .woocommerce-shipping-fields { margin-top: var(--wist-space-400); } /* ------------------------------------------------------------------ */ /* Metodo de pago */ /* ------------------------------------------------------------------ */ .woocommerce-checkout .wc_payment_methods { margin: var(--wist-space-300) 0 0; padding: 0; list-style: none; } .woocommerce-checkout .wc_payment_method > label { display: flex; align-items: center; gap: var(--wist-space-100); min-height: 44px; font-family: Inter, system-ui, sans-serif; font-size: 1rem; font-weight: 500; color: var(--wist-ink-primary); cursor: pointer; } /* La caja del metodo de pago si lleva superficie propia. * * La decision del 2026-09-02 fue dejarla sin fondo, para no anidar cajas. En * pantalla no funciona: la cajita de PayPhone son campos sueltos sobre la * misma superficie de la tarjeta, y en modo oscuro, donde el contraste entre * superficie y campo es mucho menor que en claro, el bloque de pago no se * distingue del formulario que tiene encima. Se revierte el 2026-09-03. * * Usa --wist-surface-nested, el token de panel dentro de tarjeta. No toma * prestado el lienzo: el lienzo es el fondo de la pagina, y en oscuro queda * a solo 5 puntos de L* de la tarjeta, que no alcanza para separar tres * niveles. El token anidado sube en oscuro y baja en claro, porque la * elevacion se lee por diferencia y en la zona oscura solo se gana subiendo. * * El contorno va en la linea de pelo y no en la decorativa: con el fondo ya * diferenciado, el contorno solo tiene que cerrar la forma. */ .woocommerce-checkout .payment_box { margin: var(--wist-space-200) 0 0; padding: var(--wist-space-300); border-radius: var(--wist-radius-lg); background: var(--wist-surface-nested); box-shadow: inset 0 0 0 1px var(--wist-border-hairline); font-size: 0.9375rem; color: var(--wist-ink-secondary); } /* El fondo propio de la cajita acompana al panel que la contiene. */ .woocommerce-checkout .payment_box #pp-button { --ppb-bs-body-bg: var(--wist-surface-nested); --ppb-bs-tertiary-bg: var(--wist-field); } /* WooCommerce dibuja una flecha sobre la caja del metodo. No pertenece al sistema y con la caja ya diferenciada por fondo no aporta nada. */ .woocommerce-checkout .payment_box::before { display: none; } /* ------------------------------------------------------------------ */ /* Velo de carga */ /* ------------------------------------------------------------------- * Es blockUI, de WooCommerce, no de PayPhone. Tapa el bloque de pago y el * resumen mientras recalcula por AJAX, con un velo blanco al 60 % declarado * en linea desde checkout.js. * * Dos problemas. En modo oscuro un velo blanco es una mancha clara sobre el * panel. Y blockUI dimensiona el velo con alto y ancho calculados al momento * de bloquear, que en el bloque de pago resolvia a cero de ancho y dejaba la * tarjeta a medio cubrir. * * Se resuelve dandole al velo posicionamiento propio con inset, en lugar de * las medidas que el calcula, y el color del panel en vez del blanco fijo. Se * conserva el velo en vez de sustituirlo por un skeleton: es la senal de * estado de WooCommerce y esta atada a su ciclo de AJAX, mientras que un * skeleton tendria que imitar la maqueta de PayPhone y se desincronizaria en * cuanto ellos cambien su bundle. * ------------------------------------------------------------------ */ /* El velo se posiciona contra el bloque, asi que el bloque debe ser el contexto. blockUI no siempre lo declara. */ .woocommerce-checkout .woocommerce-checkout-payment, .woocommerce-checkout .woocommerce-checkout-review-order-table { position: relative; } /* !important: blockUI escribe alto, ancho y fondo como estilo en linea. */ .woocommerce-checkout .blockUI.blockOverlay { inset: 0 !important; width: auto !important; height: auto !important; border-radius: var(--wist-radius-lg); background: var(--wist-surface-nested) !important; opacity: 0.75 !important; } /* ------------------------------------------------------------------ */ /* Velo de carga del formulario */ /* ------------------------------------------------------------------- * Al pulsar «Pagar», checkout.js bloquea el formulario ENTERO con blockUI: * el velo mide lo que mide el formulario y el spinner va a su centro * geometrico. En el telefono el formulario son varias pantallas, asi que el * velo tapa la pagina y el spinner cae donde caiga, casi siempre fuera de * la vista. * * Aqui el velo del formulario pasa a cubrir el viewport (fixed, 100vw por * 100vh) con el spinner y un mensaje de estado siempre en el centro de la * pantalla. El texto lo escribe checkout-espera.js en data-wist-estado y * cambia con el tiempo de espera. Solo aplica al velo hijo directo del * formulario: los parciales del bloque de pago y del resumen siguen con la * regla de arriba. * * !important porque blockUI escribe posicion, medidas y fondo en linea, y * Bricks pinta su spinner con loader.svg de WooCommerce. * ------------------------------------------------------------------ */ .woocommerce-checkout form.checkout > .blockUI.blockOverlay { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 10000 !important; border-radius: 0; background: var(--wist-canvas) !important; opacity: 0.94 !important; cursor: wait !important; } /* El spinner: anillo con el token primario, en vez del loader.svg negro. */ .woocommerce-checkout form.checkout > .blockUI.blockOverlay::before { content: ""; display: block; box-sizing: border-box; position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin: -44px 0 0 -20px; border: 3px solid var(--wist-border-decorative); border-top-color: var(--wist-blue-base); border-radius: 50%; background: none; animation: wist-girar 0.9s linear infinite; font-size: 16px; } /* El mensaje: debajo del spinner, centrado, con ancho de lectura. */ .woocommerce-checkout form.checkout > .blockUI.blockOverlay::after { content: attr(data-wist-estado); position: fixed; top: 50%; left: 50%; width: min(28rem, calc(100vw - 2 * var(--wist-space-300))); margin-top: var(--wist-space-200); transform: translateX(-50%); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: center; } @keyframes wist-girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .woocommerce-checkout form.checkout > .blockUI.blockOverlay::before { animation: wist-latir 1.6s ease-in-out infinite; border-top-color: var(--wist-border-decorative); } @keyframes wist-latir { 50% { opacity: 0.4; } } } /* ------------------------------------------------------------------ */ /* Boton de finalizar */ /* ------------------------------------------------------------------- * Tamano L de la seccion 08: es la accion mas importante del sitio. * ------------------------------------------------------------------ */ #place_order { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; margin-top: var(--wist-space-300); padding: 14px 30px; border: 0; border-radius: var(--wist-radius-lg); background: var(--wist-blue-base); color: var(--wist-blue-on); font-family: Inter, system-ui, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 24px; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } #place_order:hover { background: var(--wist-blue-base-hover); } #place_order:active { transform: scale(0.97); } #place_order:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } #place_order:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* La politica de privacidad, en tinta secundaria y tamano de nota. */ .woocommerce-privacy-policy-text p { margin: var(--wist-space-200) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wist-ink-secondary); } @media (prefers-reduced-motion: reduce) { #place_order { transition: none; } #place_order:active { transform: none; } } /* ------------------------------------------------------------------ */ /* Cajita de PayPhone */ /* ------------------------------------------------------------------- * La cajita se sirve desde el CDN de PayPhone y esta construida sobre * Bootstrap con el prefijo ppb-. No se toca su hoja: se sobreescriben sus * variables, que es lo que Bootstrap expone justamente para esto. Asi el * dia que PayPhone actualice su bundle, esto sigue en pie. * * El remapeo se acota a #pp-button, que es donde la cajita se monta. Sus * variables se declaran en :root, y ahi contaminan todo el documento: por eso * el sitio ya neutraliza su tipografia con html:root. Redeclararlas en el * contenedor las mantiene dentro de la cajita. * ------------------------------------------------------------------ */ #pp-button { /* Superficie y tinta */ --ppb-bs-body-bg: var(--wist-surface); --ppb-bs-body-color: var(--wist-ink-primary); --ppb-bs-border-color: var(--wist-border-decorative); --ppb-bs-secondary-color: var(--wist-ink-secondary); --ppb-bs-tertiary-bg: var(--wist-canvas); /* Marca */ --ppb-bs-primary: var(--wist-blue-base); --ppb-bs-link-color: var(--wist-blue-base); --ppb-bs-link-hover-color: var(--wist-blue-base-hover); /* Forma: escala cerrada del sistema, sin el radio de pildora */ --ppb-bs-border-radius: 1.125rem; --ppb-bs-border-radius-sm: 0.625rem; --ppb-bs-border-radius-lg: 1.375rem; --ppb-bs-border-radius-xl: 1.75rem; --ppb-bs-border-radius-pill: 1.75rem; /* Tipografia: Inter es la de interfaz, y 1 rem evita el zoom de iOS */ --ppb-bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --ppb-bs-body-font-size: 1rem; --ppb-bs-body-line-height: 1.5; /* Foco: el mismo anillo que el resto del sitio */ --ppb-bs-focus-ring-color: var(--wist-blue-base); --ppb-bs-focus-ring-width: 2px; display: block; } /* Los campos de tarjeta son inputs de verdad, no un iframe, asi que aceptan el estilo del sistema. Alto y relleno de la seccion 10. */ #pp-button .ppb-form-control, #pp-button .ppb-form-select { box-sizing: border-box; min-height: 2.75rem; padding: 10px 14px; border: none; box-shadow: inset 0 0 0 1px var(--wist-border-decorative); border-radius: var(--wist-radius-lg); background-color: var(--wist-field); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 24px; appearance: none; -webkit-appearance: none; } #pp-button .ppb-form-control::placeholder { color: var(--wist-ink-secondary); } #pp-button .ppb-form-control:focus-visible, #pp-button .ppb-form-select:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } /* Sus botones, al tamano y forma del sistema. */ #pp-button .ppb-btn { min-height: 2.75rem; padding: 10px 20px; border-radius: var(--wist-radius-lg); font-family: Inter, system-ui, sans-serif; font-size: 1rem; font-weight: 500; line-height: 24px; } /* La tarjeta interior no necesita su propio contorno: ya vive dentro de la caja del metodo de pago. Dos contornos anidados se leen como un error. */ #pp-button .ppb-card { border: none; background: transparent; } #pp-button .ppb-error-message { color: var(--wist-danger-base); font-size: 0.875rem; } /* ------------------------------------------------------------------ */ /* Resumen plegable en movil */ /* ------------------------------------------------------------------- * Con las columnas apiladas, un resumen largo separa el formulario de la * cajita de pago por cientos de pixeles. Plegado, el cliente ve el total y * llega al pago de inmediato, y despliega solo si quiere revisar. * ------------------------------------------------------------------ */ .wist-review-collapse { margin-bottom: var(--wist-space-200); } .wist-review-collapse__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wist-space-200); min-height: 44px; padding: var(--wist-space-150) 0; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; color: var(--wist-ink-secondary); cursor: pointer; list-style: none; } .wist-review-collapse__head::-webkit-details-marker { display: none; } /* Cursor propio, que gira al desplegar. El nativo no se puede estilar de forma uniforme entre navegadores. */ .wist-review-collapse__head::before { content: ""; order: 3; width: 16px; height: 16px; background-color: currentColor; transition: transform 0.15s ease; -webkit-mask: var(--wist-icon-chevron) center / contain no-repeat; mask: var(--wist-icon-chevron) center / contain no-repeat; --wist-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .wist-review-collapse[open] .wist-review-collapse__head::before { transform: rotate(180deg); } .wist-review-collapse__total { margin-left: auto; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wist-ink-primary); } .wist-review-collapse__head:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .wist-review-collapse__head::before { transition: none; } } /* ------------------------------------------------------------------ */ /* Correcciones sobre el elemento de revision del pedido */ /* ------------------------------------------------------------------- * El control de borde de woocommerce-checkout-order-review NO apunta a su * raiz: Bricks lo emite sobre .woocommerce-checkout-review-order, un hijo * interno. Puesto desde el panel, el resultado era un recuadro con radio * envolviendo la tabla, y la tarjeta principal sin radio. * * Por eso el contorno de la tarjeta se declara aqui, sobre la raiz, y se * neutraliza cualquier borde del envoltorio interno. * ------------------------------------------------------------------ */ #ab-checkout-payment-wrap { border-radius: var(--wist-radius-xl); box-shadow: inset 0 0 0 1px var(--wist-border-decorative); } #ab-checkout-payment-wrap .woocommerce-checkout-review-order { border: 0; border-radius: 0; } /* La misma correccion para la columna de datos, que usa el elemento de detalles del cliente. */ #ab-checkout-billing-wrap > .brxe-container { border-radius: var(--wist-radius-xl); } /* Neutraliza cualquier borde que WooCommerce, Bricks o el editor de campos dibujen por celda. Las separaciones las pone la fila, y solo entre filas. */ #ab-checkout-payment-wrap table.shop_table, #ab-checkout-payment-wrap table.shop_table th, #ab-checkout-payment-wrap table.shop_table td, #ab-checkout-payment-wrap table.shop_table tr, #ab-checkout-payment-wrap table.shop_table thead, #ab-checkout-payment-wrap table.shop_table tbody, #ab-checkout-payment-wrap table.shop_table tfoot { border: 0; border-collapse: collapse; border-spacing: 0; background: transparent; } /* ------------------------------------------------------------------ */ /* Reparto de columnas segun la sesion */ /* ------------------------------------------------------------------- * Sin sesion, la columna izquierda lleva el formulario completo de * facturacion y envio: es la que necesita el ancho. * * Con sesion iniciada, esa columna se reduce a dos botones de resumen del * Address Book, porque sus campos nativos estan ocultos. Ahi el peso se * invierte: lo que el cliente revisa es el pedido y lo que hace es pagar. * * WordPress marca el body con la clase logged-in, asi que el reparto se * resuelve sin condiciones en el builder ni markup duplicado. * ------------------------------------------------------------------ */ @media (min-width: 992px) { body.logged-in #ab-checkout-billing-wrap > .brxe-container { width: 42%; } body.logged-in #ab-checkout-payment-wrap { width: 58%; } } /* ------------------------------------------------------------------ */ /* Campo de indicaciones del pedido */ /* ------------------------------------------------------------------- * El area de texto se quedaba blanca en modo oscuro: WooCommerce le impone * su propio fondo y le gana al estilo de formulario del sitio. Sobre el * lienzo oscuro quedaba un rectangulo blanco con texto gris. * ------------------------------------------------------------------ */ #ab-checkout-billing-wrap textarea, #ab-checkout-billing-wrap #order_comments { box-sizing: border-box; width: 100%; min-height: 6rem; padding: 10px 14px; border: none; box-shadow: inset 0 0 0 1px var(--wist-border-decorative); border-radius: var(--wist-radius-lg); background-color: var(--wist-surface); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 24px; resize: vertical; appearance: none; -webkit-appearance: none; } #ab-checkout-billing-wrap textarea::placeholder { color: var(--wist-ink-secondary); } #ab-checkout-billing-wrap textarea:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } /* ------------------------------------------------------------------ */ /* Resumen plegable, en todos los anchos */ /* ------------------------------------------------------------------- * Se pliega SOLO la lista de productos. Subtotal, envio y total quedan * siempre a la vista, porque son el dato que el cliente necesita para * decidir, y esconderlos detras de un clic no ayuda a nadie. * * La cabecera dice cuantos articulos hay, de modo que plegado tampoco se * pierde la nocion de que se esta comprando. * ------------------------------------------------------------------ */ .wist-review-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--wist-space-200); width: 100%; min-height: 44px; margin: 0 0 var(--wist-space-100); padding: 0; border: 0; background: none; font-family: Inter, system-ui, sans-serif; font-size: 0.9375rem; color: var(--wist-ink-secondary); cursor: pointer; } .wist-review-toggle:hover { color: var(--wist-ink-primary); } .wist-review-toggle:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } .wist-review-toggle__count { display: flex; align-items: center; gap: var(--wist-space-100); } /* Cursor propio: el nativo no se puede estilar igual entre navegadores. */ .wist-review-toggle__count::after { content: ""; width: 16px; height: 16px; background-color: currentColor; transition: transform 0.15s ease; -webkit-mask: var(--wist-icon-chevron) center / contain no-repeat; mask: var(--wist-icon-chevron) center / contain no-repeat; --wist-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .wist-review-toggle[aria-expanded="true"] .wist-review-toggle__count::after { transform: rotate(180deg); } .wist-review-toggle__hint { font-size: 0.875rem; } /* ------------------------------------------------------------------ */ /* Compra segura, bajo el boton de finalizar */ /* ------------------------------------------------------------------ */ .wist-checkout-trust { display: flex; flex-direction: column; align-items: center; gap: var(--wist-space-100); margin-top: var(--wist-space-200); text-align: center; } .wist-checkout-trust__line { display: flex; align-items: center; justify-content: center; gap: var(--wist-space-100); font-size: 0.875rem; font-weight: 500; color: var(--wist-ink-primary); } .wist-checkout-trust__line::before { content: ""; flex: none; width: 18px; height: 18px; background-color: var(--wist-success-base); -webkit-mask: var(--wist-icon-shield) center / contain no-repeat; mask: var(--wist-icon-shield) center / contain no-repeat; --wist-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .wist-checkout-trust__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--wist-ink-secondary); } /* ------------------------------------------------------------------ */ /* Resumen con plantilla propia */ /* ------------------------------------------------------------------- * La lista de productos ya no depende de convencer a una tabla de que * parezca otra cosa: el markup lo escribe review-order.php del tema hijo. * Los totales siguen en tabla a proposito, porque funciones del nucleo de * WooCommerce imprimen `tr` y ahi otros plugins insertan filas. * ------------------------------------------------------------------ */ .wist-review-table.is-collapsed tbody { display: none; } /* Las filas de producto se maquetan como tabla, igual que el pie. Cualquier otra cosa rompe la columna del importe. */ .wist-review-table tbody td { padding: 12px 0; vertical-align: middle; } /* La fila de envio: gratis es un valor comercial y se destaca. */ .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td { font-weight: 600; color: var(--wist-success-base); } /* ------------------------------------------------------------------ */ /* Cupon dentro del resumen */ /* ------------------------------------------------------------------ */ .wist-review-coupon { margin-top: var(--wist-space-200); } .wist-review-coupon summary { min-height: 44px; display: flex; align-items: center; color: var(--wist-ink-secondary); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; } .wist-review-coupon summary::-webkit-details-marker { display: none; } .wist-review-coupon summary:hover { color: var(--wist-ink-primary); } /* Bricks estiliza form.checkout_coupon con --bricks-bg-light, un color fijo * sin variante oscura, mas 30 px de margen y 20 px de relleno. En modo oscuro * eso era una banda blanca dentro de la tarjeta. La clase no se puede quitar * del formulario: es la que usa checkout.js para enganchar el envio por AJAX. * Se neutraliza aqui, que es lo que deja el cupon como una fila de campo y * boton sobre la propia tarjeta. */ .woocommerce-checkout .wist-review-coupon__form { display: flex; gap: var(--wist-space-100); margin: var(--wist-space-100) 0 0; padding: 0; background: transparent; } .wist-review-coupon__input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 2.75rem; padding: 10px 14px; border: none; box-shadow: inset 0 0 0 1px var(--wist-border-decorative); border-radius: var(--wist-radius-lg); background: var(--wist-surface); color: var(--wist-ink-primary); font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 24px; appearance: none; } .wist-review-coupon__apply { flex: none; min-height: 2.75rem; padding: 10px 20px; border: 0; border-radius: var(--wist-radius-lg); background: transparent; box-shadow: inset 0 0 0 1px var(--wist-border-interactive); color: var(--wist-ink-primary); font: 500 1rem/24px Inter, sans-serif; cursor: pointer; } .wist-review-coupon__apply:hover { background: var(--wist-surface); } .wist-review-coupon__input:focus-visible, .wist-review-coupon__apply:focus-visible, .wist-review-coupon summary:focus-visible { outline: 2px solid var(--wist-blue-base); outline-offset: 3px; } /* La cabecera plegable va en caption, que es el lugar del HTML para el encabezado de una tabla. Fuera de la tabla se duplicaba en cada actualizacion por AJAX, porque WooCommerce reemplaza por ese selector. */ .wist-review-table > caption.wist-review-head { caption-side: top; display: block; padding: 0; text-align: left; } .wist-review-coupon-row td { padding: 0; border: 0; } /* El borde gris de la cajita: lo dibuja WooCommerce sobre #payment, con 1 px y 20 px de relleno. Dentro de una tarjeta que ya tiene contorno, es un recuadro dentro de otro. */ .woocommerce-checkout #payment { padding: 0; border: 0; background: transparent; } /* ------------------------------------------------------------------ */ /* El pago, ahora en la columna izquierda */ /* ------------------------------------------------------------------- * Separado de los datos por espacio y no por una linea: son dos partes del * mismo flujo, no dos bloques distintos. * ------------------------------------------------------------------ */ .woocommerce-checkout #payment { margin-top: var(--wist-space-400); } /* Con el pago fuera, la columna del resumen es corta: ya no necesita la inversion de anchos que se habia puesto para la sesion iniciada. */ @media (min-width: 992px) { body.logged-in #ab-checkout-billing-wrap > .brxe-container { width: 58%; } body.logged-in #ab-checkout-payment-wrap { width: 42%; } } /* ------------------------------------------------------------------ */ /* Campos ocultos y espacio sobrante */ /* ------------------------------------------------------------------- * El selector de pais se oculta desde functions.php, con una clase, porque * su valor tiene que seguir viajando en el envio y el JS de direcciones de * WooCommerce lo usa para poblar el desplegable de provincias. * * Al ocultarlo, el contenedor de campos de facturacion queda vacio para un * cliente con sesion iniciada, cuyos campos ya oculta la libreta. Un * contenedor vacio con margen deja un hueco que se lee como un error de * maquetacion. * ------------------------------------------------------------------ */ .woocommerce-checkout .wist-campo-oculto { display: none !important; } /* :has permite colapsar un contenedor solo cuando de verdad quedo vacio, sin tener que decidirlo en PHP segun el estado de la sesion. */ .woocommerce-billing-fields__field-wrapper:not(:has(.form-row:not(.wist-campo-oculto))), .woocommerce-shipping-fields:not(:has(.form-row)) { display: none; } /* ------------------------------------------------------------------ * La separacion entre la libreta y las indicaciones del pedido * * Medido el 2026-09-07: entre el boton de direccion y la etiqueta de * indicaciones habia 71 px, que no correspondian a ninguna decision. Salian * de tres sitios que se sumaban. * * Se suman y no colapsan porque Bricks declara * `#customer_details { display: flex; flex-direction: column; gap: 15px }`, * y dentro de un contenedor flex los margenes de los hijos no colapsan nunca. * Esa es la pieza que explica el hueco, y la que hace que razonar sobre esta * zona como si fuera flujo normal de bloques de un resultado equivocado. * * 24 px margen de arrastre del ultimo selector de la libreta * 15 px gap del contenedor flex de Bricks * 32 px margen de grupo de .woocommerce-additional-fields, hoy 24 * * Se anulan los dos primeros y la separacion queda expresada una sola vez, en * el tercero, que es el que significa algo: el corte entre el bloque de datos * del cliente y el de indicaciones del pedido. * ------------------------------------------------------------------ */ .woocommerce-checkout #customer_details { gap: 0; } /* El ultimo selector de la libreta no arrastra espacio: lo que sigue es otro grupo. Los 24 px internos entre selector y selector se conservan. Va por id y no con :last-of-type porque .woocommerce-billing-fields__field-wrapper es tambien un div y viene despues, asi que el selector nunca es el ultimo de su tipo. Si la casilla de guardar se muestra, se apoya en su propio margen de 12 px, que es la separacion que le corresponde por pertenecer al mismo grupo. */ #wist-ab-checkout-address-selector { margin-bottom: 0; } .woocommerce-additional-fields { margin-top: var(--wist-space-300); } .woocommerce-additional-fields h3 { margin-bottom: var(--wist-space-200); } #order_comments_field { margin-bottom: 0; }