/* ============================================================================
   Tu Vecino Friki — Flujo de compra
   Carrito, finalizar compra y mi cuenta. Escrito de cero sobre tokens.css.

   Criterio (PRODUCT.md): "el carrito y checkout deben sentirse calmados,
   ordenados y profesionales" y "claridad antes que estilo: total, envio,
   descuentos y metodo de pago deben leerse en segundos".

   Reglas que se siguen aqui:
   - El rojo de marca solo aparece en la accion principal y en el paso actual.
   - Nada se esconde detras de un boton "Editar" o "Ver".
   - Cada superficie tiene borde: se tiene que notar donde empieza y acaba.
   - Sin resplandores. La profundidad la dan sombra y borde, no neon.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Contenedor de las tres pantallas
   --------------------------------------------------------------------------- */

.tvf-woo-page {
  --compra-hueco: var(--e-5);

  /* WooCommerce 11 pinta sus campos con estas variables propias. Ajustandolas
     aqui se tiñe de una vez todo lo que genera el plugin (incluidos textarea,
     select2 y los campos que inyecta por AJAX), sin perseguir cada selector. */
  --wc-form-color-background: var(--sup-3);
  --wc-form-color-text: var(--texto);
  --wc-form-color-placeholder: var(--texto-tenue);
  --wc-form-border-color: var(--borde);
  --wc-form-border-radius: var(--r-md);
  --wc-form-color-error: var(--error);
  --wc-form-color-success: var(--exito);
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding: var(--e-6) var(--e-5) var(--e-9);
}

.tvf-woo-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  color: var(--texto-tenue);
  font-size: var(--t-sm);
}

.tvf-woo-page .breadcrumb a {
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color var(--mov-rapido) var(--curva-salida);
}

.tvf-woo-page .breadcrumb a:hover {
  color: var(--texto);
}

.tvf-woo-page .tvf-page-title {
  margin: 0 0 var(--e-5);
  font-family: var(--fuente-titulo);
  font-size: var(--t-3xl);
  font-weight: var(--peso-negrita);
  line-height: var(--alto-compacto);
  letter-spacing: var(--tracking-titulo);
  color: var(--texto);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   2. Pasos de la compra
   Antes era una caja enorme con un hueco muerto a la izquierda porque el
   contenedor repartia el espacio sobrante entre pistas vacias. Ahora es una
   fila de tres pasos unidos por una linea, sin caja alrededor.
   --------------------------------------------------------------------------- */

.tvf-checkout-flow {
  margin-bottom: var(--e-6);
}

.tvf-purchase-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.tvf-purchase-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-5);
  text-align: center;
}

/* La linea que une los pasos. Se dibuja a los lados del circulo, no debajo
   del texto, para que no cruce las etiquetas. */
.tvf-purchase-step::before,
.tvf-purchase-step::after {
  content: "";
  position: absolute;
  top: calc(var(--e-5) + 15px);
  height: 2px;
  background: var(--borde);
}

.tvf-purchase-step::before {
  left: 0;
  right: calc(50% + 22px);
}

.tvf-purchase-step::after {
  left: calc(50% + 22px);
  right: 0;
}

.tvf-purchase-step:first-child::before,
.tvf-purchase-step:last-child::after {
  display: none;
}

.tvf-purchase-step.is-complete::before,
.tvf-purchase-step.is-complete::after,
.tvf-purchase-step.is-current::before {
  background: var(--marca);
}

.tvf-purchase-step > a,
.tvf-purchase-step > span {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.tvf-purchase-step i,
.tvf-purchase-step .tvf-icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-redondo);
  border: 2px solid var(--borde);
  background: var(--sup-fondo);
  color: var(--texto-tenue);
  font-size: var(--t-sm);
  transition: border-color var(--mov-normal) var(--curva-salida),
              background var(--mov-normal) var(--curva-salida),
              color var(--mov-normal) var(--curva-salida);
}

.tvf-purchase-step strong {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  color: var(--texto-tenue);
}

.tvf-purchase-step small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* Paso hecho */
.tvf-purchase-step.is-complete i,
.tvf-purchase-step.is-complete .tvf-icono {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
}

.tvf-purchase-step.is-complete strong {
  color: var(--texto-suave);
}

/* Paso actual: el unico rojo de la pantalla junto al boton de accion */
.tvf-purchase-step.is-current i,
.tvf-purchase-step.is-current .tvf-icono {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
}

.tvf-purchase-step.is-current strong {
  color: var(--texto);
}

.tvf-purchase-step.is-current small {
  color: var(--texto-suave);
}

.tvf-purchase-step a:hover i,
.tvf-purchase-step a:hover .tvf-icono {
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

/* ---------------------------------------------------------------------------
   3. Rejilla de dos columnas
   El contenido manda y el resumen acompana, pegado al hacer scroll.
   --------------------------------------------------------------------------- */

.tvf-cart-page .woocommerce,
.woocommerce-checkout .tvf-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
  align-items: start;
  gap: var(--compra-hueco);
}

/* En el carrito los avisos y el formulario van en la columna ancha y el
   bloque de totales en la estrecha. El orden se fija a mano porque en el DOM
   el cupon viene ANTES de la cesta, y ahi pesaba mas que la propia compra. */
.tvf-cart-page .woocommerce > * {
  grid-column: 1;
  min-width: 0;
}

.tvf-cart-page .woocommerce-notices-wrapper { order: 1; }
.tvf-cart-page .tvfvc-promo-note           { order: 2; }
.tvf-cart-page .tvf-cart-notices           { order: 3; }
.tvf-cart-page .woocommerce-cart-form      { order: 4; }
.tvf-cart-page .tvf-cart-coupon-panel      { order: 5; }

.tvf-cart-page .cart-collaterals {
  grid-column: 2;
  grid-row: 1 / span 20;
  order: 0;
  align-self: start;
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-4));
  /* WooCommerce trae de serie `.cart-collaterals .cart_totals { float:right;
     width:48% }` en su propia hoja. Sin esto el resumen se queda en media
     columna y los importes se salen. */
  float: none;
  width: auto;
}

.tvf-cart-page .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}

.woocommerce-checkout .tvf-checkout-sidebar {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-4));

  /* La columna ES el panel.
     Antes sus ocho bloques (cabecera, resumen, mensaje de PayPal, metodos de
     pago, botones y garantias) colgaban sueltos, cada uno pegado al borde y
     sin relleno: de ahi la sensacion de cosa sin terminar. */
  display: flex;
  flex-direction: column;

  /* El panel no pasa de lo que mide la ventana y se desplaza por dentro.
     Antes media 1157 px en una pantalla de 900: la franja de pago, pegada al
     pie, quedaba flotando ENCIMA de la lista de pasarelas y la tapaba con su
     propio fondo. Acotando el alto aqui, la cabecera se queda arriba, la
     franja abajo y en medio hay una unica zona que se desplaza. */
  max-height: calc(100vh - var(--alto-cabecera) - var(--e-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;

  /* Sin relleno arriba ni abajo: lo ponen la cabecera y la franja, que son las
     que tocan esos bordes. Con relleno vertical el contenido se colaria por
     encima de la cabecera pegajosa. */
  padding: 0 var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--sup-2);
  box-shadow: var(--sombra-2);
}

/* Ningun bloque encoge. En una columna flex con el alto acotado los hijos se
   comprimen por defecto en vez de desbordar, y la lista de articulos se veia
   recortada a la mitad de una fila. Fijando flex-shrink a 0, cada bloque ocupa
   lo suyo y lo que sobra lo resuelve el desplazamiento del panel. */
.woocommerce-checkout .tvf-checkout-sidebar > * {
  flex-shrink: 0;
}

.woocommerce-checkout .tvf-checkout-sidebar::-webkit-scrollbar {
  width: 6px;
}

.woocommerce-checkout .tvf-checkout-sidebar::-webkit-scrollbar-thumb {
  border-radius: var(--r-redondo);
  background: var(--borde-fuerte);
}

.woocommerce-checkout .tvf-checkout-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* El mensaje de plazos de PayPal viene en un iframe con fondo blanco y se
   colaba entre el total y las pasarelas: una losa clara partiendo en dos el
   resumen. Su sitio es la ficha de producto y la cesta, donde el cliente aun
   esta decidiendo, no el ultimo paso. */
.woocommerce-checkout .tvf-checkout-sidebar .ppcp-messages,
.woocommerce-checkout .tvf-checkout-sidebar [data-pp-message] {
  /* El !important es necesario: el script de PayPal escribe display:block
     directamente en el atributo style del elemento, y un estilo en linea gana
     a cualquier hoja. */
  display: none !important;
}

/* Las garantias van justo encima de la franja de pago, no debajo: son el
   ultimo argumento antes de pulsar, y detras de la franja no se leerian. */
.woocommerce-checkout .tvf-checkout-sidebar > .tvf-secure-payment-badges {
  order: 8;
}

.woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order {
  order: 9;
}

/* Los contenedores vacios que deja el plugin de PayPal (botones de Apple Pay
   y Google Pay que no llegan a pintarse) abrian huecos entre bloques.
   El envoltorio del boton de PayPal solo ocupa sitio cuando PayPal esta
   elegido; el resto del tiempo son 45 px de nada. */
.woocommerce-checkout .tvf-checkout-sidebar > div:empty {
  display: none;
}

.woocommerce-checkout .tvf-checkout-sidebar > .ppc-button-wrapper:not(:has(*)) {
  display: none;
}

/* ---------------------------------------------------------------------------
   4. Panel: la superficie base de todo el flujo
   --------------------------------------------------------------------------- */

.tvf-cart-page .woocommerce-cart-form,
.tvf-cart-page .cart_totals,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout .tvf-checkout-sidebar > .tvf-panel {
  background: var(--sup-1);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}

.tvf-cart-page .woocommerce-cart-form,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields {
  padding: var(--e-5);
  margin-bottom: var(--e-4);
}

/* Titulos de seccion dentro de los paneles */
.tvf-cart-page .tvf-cart-form-head h2,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
  margin: 0 0 var(--e-4);
  font-family: var(--fuente);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  color: var(--texto);
}

.tvf-cart-page .tvf-cart-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde-sutil);
}

.tvf-cart-page .tvf-cart-form-head h2 {
  margin: 0;
}

.tvf-cart-page .tvf-cart-form-head p {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.tvf-cart-page .tvf-cart-continue {
  display: inline-flex;
  align-items: center;
  /* Enlace suelto, no dentro de una frase: necesita zona pulsable propia. */
  min-height: 32px;
  gap: var(--e-2);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-page .tvf-cart-continue:hover {
  color: var(--texto);
}

/* Al desplazarse hasta un elemento (al pulsar "Cambiar", al saltar a un campo
   con error, al enfocar con el teclado) el navegador lo deja pegado al borde de
   la ventana... justo debajo de la cabecera fija o justo detras de la franja de
   pago. Estos margenes le dicen donde estan de verdad los bordes utiles. */
.woocommerce-checkout .wc_payment_method,
.woocommerce-checkout .tvf-pago-resumen,
.woocommerce-checkout .form-row,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.tvf-cart-page .form-row {
  scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4));
  scroll-margin-bottom: calc(var(--tvf-alto-franja-pago, 168px) + var(--e-4));
}

/* Enlaces que son la accion principal de su bloque aunque parezcan texto: el
   acceso a la cuenta desde el checkout y el aviso de contrasena olvidada.
   Median 20 y 16 px de alto, por debajo de los 24 que pide WCAG 2.5.8. */
.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin,
.woocommerce-form-login-toggle a.showlogin,
.woocommerce-LostPassword a,
.woocommerce-form-coupon-toggle a.showcoupon {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* ---------------------------------------------------------------------------
   5. Lineas del carrito
   --------------------------------------------------------------------------- */

.tvf-cart-page .shop_table.cart {
  width: 100%;
  border-collapse: collapse;
}

.tvf-cart-page .shop_table.cart thead th {
  padding: 0 0 var(--e-3);
  border-bottom: 1px solid var(--borde-sutil);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.tvf-cart-page .shop_table.cart thead th.product-quantity {
  text-align: right;
}

.tvf-cart-page .cart_item td {
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borde-sutil);
  vertical-align: middle;
}

.tvf-cart-page .cart_item:last-of-type td {
  border-bottom: 0;
}

.tvf-cart-page .cart_item .product-thumbnail {
  width: 84px;
  padding-right: var(--e-4);
}

.tvf-cart-page .cart_item .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: var(--e-2);
  border-radius: var(--r-md);
  background: var(--sup-imagen);
}

.tvf-cart-page .cart_item .product-name {
  font-size: var(--t-base);
  line-height: var(--alto-normal);
}

.tvf-cart-page .cart_item .product-name a {
  color: var(--texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-page .cart_item .product-name a:hover {
  color: var(--marca-texto);
}

.tvf-cart-page .cart_item .product-price {
  width: 110px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tvf-cart-page .cart_item .product-quantity {
  width: 170px;
}

.tvf-cart-page .tvf-cart-quantity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-3);
}

/* Selector de cantidad */
.tvf-cart-page .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-2);
  overflow: hidden;
}

.tvf-cart-page .cart-qty-btn {
  width: 34px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: var(--t-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva-salida),
              color var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-page .cart-qty-btn:hover:not(:disabled) {
  background: var(--sup-3);
  color: var(--texto);
}

.tvf-cart-page .cart-qty-btn:disabled {
  color: var(--texto-deshabilitado);
  cursor: not-allowed;
}

.tvf-cart-page .quantity .qty {
  width: 42px;
  height: 36px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--borde-sutil);
  background: transparent;
  color: var(--texto);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}

.tvf-cart-page .quantity .qty::-webkit-outer-spin-button,
.tvf-cart-page .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Quitar linea */
.tvf-cart-page a.remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--texto-tenue);
  font-size: var(--t-base);
  text-decoration: none;
  transition: color var(--mov-rapido) var(--curva-salida),
              background var(--mov-rapido) var(--curva-salida),
              border-color var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-page a.remove:hover {
  color: var(--error);
  background: var(--error-tenue);
  border-color: var(--error-borde);
}

/* La fila de acciones nativa de WooCommerce solo lleva el boton oculto de
   actualizar y los nonces: no debe ocupar espacio. */
.tvf-cart-page .shop_table.cart td.actions {
  padding: 0;
  border: 0;
}

.tvf-cart-page td.actions .tvf-update-cart-hidden,
.tvf-cart-page .tvf-update-cart-hidden {
  /* No se borra del DOM: WooCommerce lo necesita para enviar el formulario
     cuando cambia una cantidad. Solo se saca de la vista. */
  position: absolute !important;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   6. Resumen (carrito y checkout comparten lenguaje)
   --------------------------------------------------------------------------- */

.tvf-cart-page .cart_totals {
  padding: var(--e-5);
  background: var(--sup-2);
}

.tvf-cart-page .cart_totals > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde-sutil);
  font-family: var(--fuente);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tvf-cart-total-status {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--r-redondo);
  background: var(--exito-tenue);
  color: var(--exito);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
}

.tvf-cart-page .cart_totals table,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.tvf-cart-page .shop_table.cart {
  width: 100%;
  /* WooCommerce trae `border-collapse: separate` con borde y radio en
     table.shop_table: eso dibujaba un marco alrededor del resumen. */
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
}

.tvf-cart-page .cart_totals table th,
.tvf-cart-page .cart_totals table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border-left: 0;
  border-right: 0;
}

.tvf-cart-page .cart_totals tr > th,
.tvf-cart-page .cart_totals tr > td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: var(--e-2) 0;
  border: 0;
  text-align: left;
  vertical-align: middle;
  font-size: var(--t-base);
}

.tvf-cart-page .cart_totals tr > th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
  color: var(--texto-suave);
  font-weight: var(--peso-normal);
}

.tvf-cart-page .cart_totals tr > td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  color: var(--texto);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Descuentos en verde: es dinero a favor del cliente. */
.tvf-cart-page .cart-discount td,
.tvf-cart-page tr.fee td,
.woocommerce-checkout .cart-discount td,
.woocommerce-checkout tr.fee td {
  color: var(--exito);
}

/* Total */
.tvf-cart-page .order-total th,
.tvf-cart-page .order-total td,
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde) !important;
  font-size: var(--t-lg);
  font-weight: var(--peso-negrita);
  color: var(--texto);
}

.tvf-cart-page .order-total .includes_tax,
.woocommerce-checkout .order-total .includes_tax {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  color: var(--texto-tenue);
}

/* ---------------------------------------------------------------------------
   7. Barra de envio gratis
   --------------------------------------------------------------------------- */

.tvf-free-shipping-notice td {
  padding: var(--e-3) 0 !important;
}

.tvf-shipping-bar__text {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
  text-align: left;
  white-space: normal;
}

.tvf-shipping-bar__text .amount {
  color: var(--oro);
  font-weight: var(--peso-fuerte);
}

.tvf-shipping-bar__track {
  height: 6px;
  border-radius: var(--r-redondo);
  background: var(--sup-3);
  overflow: hidden;
}

.tvf-shipping-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--oro);
  transition: width var(--mov-lento) var(--curva-salida);
}

/* ---------------------------------------------------------------------------
   8. Metodos de envio
   --------------------------------------------------------------------------- */

.woocommerce-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-shipping-methods li {
  margin: 0;
}

.woocommerce-shipping-methods label {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  justify-content: flex-end;
  font-size: var(--t-base);
  color: var(--texto);
  cursor: pointer;
}

.tvf-shipping-free-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
}

.tvf-shipping-free-name {
  color: var(--texto);
}

/* El precio tachado y el «Gratis» salian pegados («5,50 €Gratis»). */
.tvf-shipping-free-prices {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-2);
}

.tvf-shipping-free-prices del {
  color: var(--texto-tenue);
  font-weight: var(--peso-normal);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.tvf-shipping-free-prices del .amount {
  color: inherit;
}

.tvf-shipping-free-prices strong {
  color: var(--exito);
  font-weight: var(--peso-fuerte);
}

.tvf-shipping-free-prices .amount {
  color: var(--exito);
  font-weight: var(--peso-fuerte);
}

.woocommerce-shipping-destination {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-align: right;
}

.shipping-calculator-button {
  /* Control suelto, no un enlace dentro de una frase: se queda en 23 px de
     alto y el minimo de WCAG 2.5.8 son 24. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: var(--e-2);
  color: var(--oro);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shipping-calculator-form {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-sutil);
  text-align: left;
}

/* ---------------------------------------------------------------------------
   9. Cupon
   Pasa a ser un detalle discreto dentro del resumen. Antes era un panel a
   todo lo ancho que pesaba mas que la propia cesta.
   --------------------------------------------------------------------------- */

.tvf-cart-coupon-panel {
  margin: var(--e-4) 0 0;
  padding: var(--e-4);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-lg);
  background: var(--sup-1);
}

.tvf-cart-coupon-kicker {
  display: none;
}

.tvf-cart-coupon-panel h2 {
  margin: 0 0 var(--e-1);
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tvf-cart-coupon-panel p {
  margin: 0 0 var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.tvf-cart-coupon-form {
  display: flex;
  gap: var(--e-2);
}

.tvf-cart-coupon-form .input-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   10. Seguridad del pago
   Una sola linea honesta. Se retiran las pildoras tipo "Conexion SSL" y
   "Pedido revisado", que imitaban sellos de certificacion externos: es una
   anti-referencia explicita de PRODUCT.md y resta credibilidad en vez de
   sumarla.
   --------------------------------------------------------------------------- */

.tvf-secure-payment-badges {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding: var(--e-3) 0 0;
  border: 0;
  border-top: 1px solid var(--borde-sutil);
  border-radius: 0;
  background: transparent;
}

/* En el carrito sigue siendo una caja aparte, porque ahi no hay panel que la
   contenga. */
.tvf-cart-page .tvf-secure-payment-badges {
  margin: var(--e-4) 0 0;
  padding: var(--e-3);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

.tvf-secure-payment-badges__head {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.tvf-secure-payment-badges__head i,
.tvf-secure-payment-badges__head .tvf-icono {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--exito);
  font-size: var(--t-md);
}

.tvf-secure-payment-badges__head strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tvf-secure-payment-badges__head span {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
  color: var(--texto-tenue);
}

.tvf-secure-payment-badges__list {
  display: none;
}

/* ---------------------------------------------------------------------------
   11. Botones
   Un solo boton rojo por pantalla: el que hace avanzar la compra.
   --------------------------------------------------------------------------- */

.tvf-cart-page .checkout-button,
.woocommerce-checkout #place_order,
.tvf-boton-primario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 52px;
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border: 0;
  border-radius: var(--r-md);
  background: var(--marca);
  color: var(--sobre-marca);
  font-family: var(--fuente);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva-salida),
              transform var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-page .checkout-button:hover,
.woocommerce-checkout #place_order:hover:not(:disabled) {
  background: var(--marca-hover);
}

.tvf-cart-page .checkout-button:active,
.woocommerce-checkout #place_order:active:not(:disabled) {
  background: var(--marca-activa);
  transform: translateY(1px);
}

.woocommerce-checkout #place_order:disabled {
  background: var(--sup-3);
  color: var(--texto-deshabilitado);
  cursor: not-allowed;
}

/* Botones secundarios: nunca rojos. */
.tvf-cart-coupon-form .button,
.tvf-boton-secundario {
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-3);
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva-salida),
              border-color var(--mov-rapido) var(--curva-salida);
}

.tvf-cart-coupon-form .button:hover,
.tvf-boton-secundario:hover {
  background: var(--sup-2);
  border-color: var(--borde-fuerte);
}

/* ---------------------------------------------------------------------------
   12. Formularios
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout .create-account {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.woocommerce-checkout .form-row {
  margin: 0;
  padding: 0;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label,
.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-address-fields label,
.woocommerce-EditAccountForm label {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
}

.woocommerce-checkout .form-row label .required,
.woocommerce-form-register label .required {
  margin-left: 2px;
  color: var(--marca-texto);
  text-decoration: none;
}

.woocommerce-checkout .form-row label .optional {
  color: var(--texto-tenue);
  font-weight: var(--peso-normal);
}

/* Campos */
.tvf-woo-page input[type="text"],
.tvf-woo-page input[type="email"],
.tvf-woo-page input[type="tel"],
.tvf-woo-page input[type="password"],
.tvf-woo-page input[type="number"]:not(.qty),
.tvf-woo-page input[type="search"],
.tvf-woo-page select,
.tvf-woo-page textarea,
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
  width: 100%;
  min-height: 46px;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-3);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: var(--alto-normal);
  transition: border-color var(--mov-rapido) var(--curva-salida),
              background var(--mov-rapido) var(--curva-salida);
}

.tvf-woo-page textarea {
  min-height: 110px;
  resize: vertical;
}

.tvf-woo-page input::placeholder,
.tvf-woo-page textarea::placeholder {
  color: var(--texto-tenue);
}

.tvf-woo-page input:hover,
.tvf-woo-page select:hover,
.tvf-woo-page textarea:hover {
  border-color: var(--borde-fuerte);
}

.tvf-woo-page input:focus,
.tvf-woo-page select:focus,
.tvf-woo-page textarea:focus {
  border-color: var(--oro);
  background: var(--sup-2);
}

/* Select nativo con flecha propia */
.tvf-woo-page select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--e-7);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Validacion */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: var(--error-borde);
  background: var(--error-tenue);
}

.woocommerce-checkout .woocommerce-validated input.input-text,
.woocommerce-checkout .woocommerce-validated select {
  border-color: rgba(74, 222, 128, 0.35);
}

.woocommerce-checkout .form-row .description,
.tvf-campo-ayuda {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

/* Casillas */
.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .create-account > p.form-row > label,
.tvf-casilla {
  display: flex !important;
  align-items: flex-start;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  color: var(--texto-suave);
  cursor: pointer;
}

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.tvf-woo-page input[type="checkbox"],
.tvf-woo-page input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--marca);
  cursor: pointer;
}

/* Crear cuenta y enviar a otra direccion: dejan de ser casillas sueltas
   flotando fuera de todo y pasan a ser una fila con superficie propia,
   alineada a la izquierda como el resto del formulario. */
.woocommerce-checkout .woocommerce-account-fields > .form-row.create-account,
.woocommerce-checkout .woocommerce-shipping-fields > h3#ship-to-different-address {
  display: block;
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  background: var(--sup-2);
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  text-align: left;
}

/* Los paneles que solo contienen esa casilla no necesitan relleno propio. */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  padding: var(--e-4);
}

.woocommerce-checkout .woocommerce-account-fields > .form-row.create-account:last-child,
.woocommerce-checkout .woocommerce-shipping-fields > h3#ship-to-different-address:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout .woocommerce-shipping-fields > h3#ship-to-different-address label {
  margin: 0;
  color: var(--texto);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
}

/* ---------------------------------------------------------------------------
   13. Resumen del pedido en el checkout
   Siempre visible: miniatura, nombre, cantidad y precio de cada linea.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .tvf-checkout-sidebar-head {
  /* Se queda arriba: con la lista larga, "Tu pedido" y "Editar cesta" tienen
     que seguir a la vista mientras se repasan los articulos. */
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  /* Los margenes negativos la llevan hasta los bordes del panel para que nada
     se vea pasar por los lados. */
  margin: 0 calc(var(--e-5) * -1) var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--borde-sutil);
  background: var(--sup-2);
}

.woocommerce-checkout .tvf-checkout-sidebar-head p {
  display: none; /* el kicker "Resumen" duplicaba el titulo de al lado */
}

.woocommerce-checkout .tvf-checkout-sidebar-head h2 {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.woocommerce-checkout .tvf-checkout-sidebar-head a {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--mov-rapido) var(--curva-salida);
}

.woocommerce-checkout .tvf-checkout-sidebar-head a:hover {
  color: var(--texto);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  display: block;
  margin: 0;
  background: transparent;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

/* La lista de articulos ya no se desplaza por su cuenta: lo hace el panel
   entero. Dos zonas de scroll anidadas (la lista dentro de la columna) obligan
   a acertar con el raton para mover una u otra, y aqui no hacen falta: con la
   cabecera arriba y la franja de pago abajo siempre fijas, el desplazamiento
   del panel ya deja el boton a la vista se lleven dos articulos o veinte. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
  display: block;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name {
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
  flex: 0 0 auto;
  white-space: nowrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
  display: block;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-sutil);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
}

.woocommerce .woocommerce-checkout-review-order-table tfoot th,
.woocommerce .woocommerce-checkout-review-order-table tfoot td,
.woocommerce .woocommerce-checkout-review-order-table tbody th,
.woocommerce .woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
  display: block;
  width: auto;
  /* WooCommerce pinta un borde superior en CADA celda. Con las filas
     convertidas en flex, esos bordes salian como rayas sueltas a media anchura
     entre los totales. Aqui el !important esta justificado: es una hoja de
     terceros que no controlamos y cuya regla gana por especificidad. El
     separador de verdad lo pone la fila, de lado a lado. */
  border: 0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr {
  border-bottom: 1px solid var(--borde-sutil);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child {
  border-bottom: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
  padding: var(--e-1) 0;
  border: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  margin-left: auto;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
  padding: var(--e-3) 0;
  border: 0;
  border-bottom: 1px solid var(--borde-sutil);
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
  vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-name {
  color: var(--texto);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td.product-total {
  text-align: right;
  white-space: nowrap;
  color: var(--texto);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}

.woocommerce-checkout .product-quantity {
  color: var(--texto-tenue);
  font-weight: var(--peso-normal);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
  border-top: 0;
}

/* ---------------------------------------------------------------------------
   14. Metodos de pago

   WooCommerce coloca el <input type="radio"> y el <label> como HERMANOS dentro
   del <li>, no anidados. Con el li en flujo normal el radio caia en su propia
   linea y cada metodo ocupaba 137 px de alto con el texto descolgado debajo.
   Se resuelve haciendo del li una rejilla de dos columnas: radio | contenido.
   --------------------------------------------------------------------------- */

/* El contenedor #payment desaparece como caja (display: contents) y sus hijos
   pasan a ser hijos directos de la columna.
   Con esto, la franja de pago se ancla a la COLUMNA entera en vez de a este
   bloque: como la columna ya esta en pantalla nada mas cargar, el boton de
   pagar queda fijado al pie desde el primer momento. Antes habia que bajar
   400 px para que apareciera (y 917 px antes de la franja). */
.woocommerce-checkout .tvf-checkout-sidebar #payment {
  display: contents;
}

/* El borde, el relleno y el rotulo se mudan a la lista, que es la que ahora
   abre el bloque. */
.woocommerce-checkout #payment ul.payment_methods {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

/* Rotulo del bloque. El marcado de WooCommerce no trae ninguno, asi que la
   lista de pasarelas aparecia sin presentacion, colgando del resumen. */
.woocommerce-checkout #payment ul.payment_methods::before {
  content: "Método de pago";
  display: block;
  margin: 0 0 var(--e-3);
  padding: 0;
  font-family: var(--fuente);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.woocommerce-checkout #payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--e-3);
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-1);
  transition: border-color var(--mov-rapido) var(--curva-salida),
              background var(--mov-rapido) var(--curva-salida);
}

/* Algunas pasarelas del plugin de PayPal no llegan a pintar nada (Google Pay
   fuera de Chrome, por ejemplo) y dejaban una fila vacia de 0 px con su borde.
   Si no tienen etiqueta, no existen.
   Se exceptuan las filas informativas de metodo retirado, que a proposito no
   llevan <label> porque no son seleccionables. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:not(:has(> label)):not(.tvf-metodo-off) {
  display: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: var(--borde-fuerte);
  background: var(--sup-2);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--marca-borde);
  background: var(--marca-tenue);
}

/* El radio: en su columna, del tamano de un objetivo tactil comodo. */
.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--marca);
  cursor: pointer;
}

/* La etiqueta: nombre a la izquierda, logotipo a la derecha. */
.woocommerce-checkout #payment ul.payment_methods li > label {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  gap: var(--e-3);
  min-height: 32px;
  margin: 0;
  padding: 0;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  line-height: var(--alto-compacto);
  cursor: pointer;
}

/* Los logotipos venian con tamanos dispares y algunos ilegibles sobre oscuro:
   se les da una altura comun y un fondo claro propio, como una tarjeta. */
.woocommerce-checkout #payment ul.payment_methods li > label img {
  height: 22px;
  width: auto;
  max-width: 74px;
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--sup-imagen);
  object-fit: contain;
}

/* --- Plegado de las formas de pago ---------------------------------------
   Cerrado se ve solo la elegida, mas una linea con los logotipos de las demas
   para que se sepa que existen. Esa linea es la diferencia con el plegado
   anterior, que las escondia sin dejar rastro. */

.woocommerce-checkout #payment.tvf-pago-cerrado ul.payment_methods li.wc_payment_method:not(:has(input:checked)) {
  display: none;
}

.woocommerce-checkout #payment.tvf-pago-cerrado ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--borde);
  background: var(--sup-1);
}

.tvf-pago-resumen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px dashed var(--borde);
  border-radius: var(--r-md);
}

.tvf-pago-resumen__otras {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  overflow: hidden;
}

.tvf-pago-resumen__texto {
  flex: 0 0 auto;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.tvf-pago-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--sup-imagen);
}

.tvf-pago-chip img {
  height: 16px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
}

.tvf-pago-chip--texto {
  padding: 2px var(--e-2);
  background: var(--sup-3);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
}

.tvf-pago-resumen__cambiar {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 32px;
  padding: 0 var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--sup-3);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva-salida),
              border-color var(--mov-rapido) var(--curva-salida);
}

.tvf-pago-resumen__cambiar:hover {
  background: var(--sup-2);
  border-color: var(--borde-fuerte);
}

/* Abierto: la linea de «tambien puedes pagar con» sobra, solo queda el boton
   para volver a cerrar. */
.woocommerce-checkout #payment:not(.tvf-pago-cerrado) .tvf-pago-resumen {
  justify-content: flex-end;
  border-style: solid;
  border-color: transparent;
  padding-inline: 0;
}

/* Formas de pago retiradas para este pedido.
   Se ensenan apagadas y con el motivo, en vez de desaparecer sin decir nada.
   No llevan input: son informacion, no una opcion. */
/* Fila simple, no rejilla: la rejilla la heredaba del metodo seleccionable y
   colocaba el icono en la columna equivocada. */
.woocommerce-checkout #payment.tvf-pago-cerrado ul.payment_methods li.tvf-metodo-off {
  display: none;
}

.woocommerce-checkout #payment ul.payment_methods li.tvf-metodo-off {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  grid-template-columns: none;
  padding: var(--e-2) var(--e-3);
  border: 1px dashed var(--borde);
  border-radius: var(--r-md);
  background: transparent;
  cursor: default;
}

.woocommerce-checkout #payment ul.payment_methods li.tvf-metodo-off:hover {
  border-color: var(--borde);
  background: transparent;
}

.tvf-metodo-off__marca {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 32px;
  color: var(--texto-tenue);
}

.tvf-metodo-off__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 32px;
  justify-content: center;
}

.tvf-metodo-off__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--texto-tenue);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
}

.tvf-metodo-off__icono {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.tvf-metodo-off__icono img {
  height: 20px;
  width: auto;
  max-width: 68px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--sup-3);
  /* En gris, para que se lea como «esta apagada» y no como una opcion mas,
     pero sin llegar a ser indescifrable: tiene que reconocerse la marca. */
  filter: grayscale(1);
  opacity: 0.75;
}

.tvf-metodo-off__motivo {
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
  color: var(--texto-tenue);
}

/* Descripcion de la pasarela elegida: ocupa las dos columnas, alineada con el
   texto y no con el radio. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment .payment_box {
  grid-column: 2;
  grid-row: 2;
  margin: var(--e-3) 0 0;
  padding: var(--e-3) 0 0;
  border-top: 1px solid var(--borde-sutil);
  background: transparent;
  background-color: transparent;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment .payment_box::before {
  display: none !important;
  content: none;
}

.woocommerce-checkout #payment .payment_box p {
  margin: 0 0 var(--e-2);
}

.woocommerce-checkout #payment .payment_box p:last-child {
  margin-bottom: 0;
}

/* Terminos y condiciones */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-sutil);
}

/* La etiqueta es un bloque con la casilla colocada aparte, no una fila flex.
   Asi el texto, el enlace y el asterisco de obligatorio fluyen como una sola
   frase. Con flex, cada uno se convertia en una columna: el texto salia partido
   en tres trozos y el asterisco acababa pegado al borde derecho, a varios
   centimetros de la palabra a la que se refiere. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  position: relative;
  display: block;
  margin: 0;
  padding-left: calc(20px + var(--e-3));
  font-size: var(--t-sm);
  font-weight: var(--peso-normal);
  line-height: var(--alto-normal);
  color: var(--texto-suave);
  cursor: pointer;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label > input[type="checkbox"] {
  position: absolute;
  top: 2px;
  left: 0;
  margin: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  display: inline;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required {
  display: inline;
  border: 0;
  text-decoration: none;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-link,
.woocommerce-checkout .woocommerce-privacy-policy-link {
  color: var(--oro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El asterisco de obligatorio se pegaba al borde derecho, lejos del texto. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required {
  margin-left: 2px;
  color: var(--marca-texto);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   15. Avisos
   --------------------------------------------------------------------------- */

.tvf-woo-page .woocommerce-message,
.tvf-woo-page .woocommerce-info,
.tvf-woo-page .woocommerce-error,
.tvf-woo-page .woocommerce-NoticeGroup li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
  list-style: none;
}

.tvf-woo-page .woocommerce-message {
  border-color: rgba(74, 222, 128, 0.3);
  background: var(--exito-tenue);
  color: var(--texto);
}

.tvf-woo-page .woocommerce-info {
  border-color: rgba(122, 167, 255, 0.3);
  background: var(--info-tenue);
  color: var(--texto);
}

.tvf-woo-page .woocommerce-error,
.tvf-woo-page .woocommerce-NoticeGroup .woocommerce-error {
  flex-direction: column;
  gap: var(--e-2);
  border-color: var(--error-borde);
  background: var(--error-tenue);
  color: var(--texto);
}

.tvf-woo-page .woocommerce-error li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.tvf-woo-page .woocommerce-message .button,
.tvf-woo-page .woocommerce-info .button {
  margin-left: auto;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto);
  font-size: var(--t-sm);
  text-decoration: none;
}

/* Aviso de la promo 2x1 */
.tvf-cart-notices:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   16. Mi cuenta
   --------------------------------------------------------------------------- */

/* El contenedor del contenido venia con max-width: 980px y centrado, asi que
   el titulo quedaba 150 px a la derecha de su propia miga de pan. En las
   pantallas de compra el contenido ocupa el ancho del contenedor. */
.woocommerce-account .tvf-page-content,
.tvf-cart-page .tvf-page-content,
.woocommerce-checkout .tvf-page-content {
  max-width: none;
  margin-inline: 0;
}

.woocommerce-account .tvf-page-title {
  margin-bottom: var(--e-5);
}

.tvf-account-auth {
  display: grid;
  gap: var(--e-5);
  max-width: 460px;
  margin-inline: auto;
}

.tvf-account-auth h2 {
  margin: 0 0 var(--e-1);
  font-family: var(--fuente-titulo);
  font-size: var(--t-2xl);
  color: var(--texto);
}

.tvf-account-auth > p {
  margin: 0 0 var(--e-4);
  color: var(--texto-tenue);
  font-size: var(--t-base);
}

.woocommerce-form-login,
.woocommerce-form-register {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-lg);
  background: var(--sup-1);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
  margin: 0;
  padding: 0;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva-salida);
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
  background: var(--marca-hover);
}

.woocommerce-LostPassword {
  margin: 0;
}

.woocommerce-LostPassword a {
  color: var(--oro);
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Navegacion de la cuenta */
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-5);
  padding: 0;
  list-style: none;
}

.woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-tactil);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--sup-1);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background var(--mov-rapido) var(--curva-salida),
              color var(--mov-rapido) var(--curva-salida),
              border-color var(--mov-rapido) var(--curva-salida);
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--sup-3);
  color: var(--texto);
}

.woocommerce-MyAccount-navigation li.is-active a {
  border-color: var(--marca-borde);
  background: var(--marca-tenue);
  color: var(--texto);
}

.woocommerce-MyAccount-content {
  padding: var(--e-5);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  color: var(--texto-suave);
  line-height: var(--alto-normal);
}

.woocommerce-MyAccount-content a {
  color: var(--oro);
}

/* Tablas de pedidos y descargas */
.woocommerce-MyAccount-content .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.woocommerce-MyAccount-content .shop_table th {
  padding: var(--e-3);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  color: var(--texto-tenue);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.woocommerce-MyAccount-content .shop_table td {
  padding: var(--e-3);
  border-bottom: 1px solid var(--borde-sutil);
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------------
   17. Movil
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .tvf-cart-page .woocommerce,
  .woocommerce-checkout .tvf-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Apilado, el orden importa mucho mas que en dos columnas.
     En escritorio el resumen vive en la columna de la derecha, asi que su
     `order: 0` no se nota. Al caer a una sola columna, ese 0 lo colocaba EL
     PRIMERO: se llegaba al carrito y lo primero era el boton de pagar, con los
     avisos y la propia lista de productos por debajo. Se podia pagar sin haber
     visto ni un aviso ni lo que se llevaba.
     El orden aqui es el del recorrido: primero lo que hay que leer, luego lo
     que se compra, y pagar al final. */
  .tvf-cart-page .woocommerce-notices-wrapper {
    order: 1;
  }

  .tvf-cart-page .tvfvc-promo-note {
    order: 2;
  }

  .tvf-cart-page .tvf-cart-notices {
    order: 3;
  }

  .tvf-cart-page .tvf-cart-coupon-panel {
    order: 4;
  }

  .tvf-cart-page .woocommerce-cart-form {
    order: 5;
  }

  .tvf-cart-page .cart-collaterals,
  .woocommerce-checkout .tvf-checkout-sidebar {
    grid-column: 1;
    grid-row: auto;
    order: 6;
    position: static;
    /* Apilada debajo del formulario ya no hay nada a que anclarse: el panel
       crece lo que necesite y quien se desplaza es la pagina. */
    max-height: none;
    overflow: visible;
    padding: var(--e-5);
  }

  .woocommerce-checkout .tvf-checkout-sidebar-head {
    position: static;
    margin: 0 0 var(--e-4);
    padding: 0 0 var(--e-4);
    background: transparent;
  }
}

@media (max-width: 767px) {
  .tvf-woo-page {
    padding: var(--e-5) var(--e-4) var(--e-8);
  }

  .tvf-woo-page .tvf-page-title {
    font-size: var(--t-2xl);
  }

  /* Pasos: se quedan en fila pero sin la descripcion, que no cabe. */
  .tvf-purchase-step small {
    display: none;
  }

  .tvf-purchase-step strong {
    font-size: var(--t-xs);
  }

  .tvf-cart-page .woocommerce-cart-form,
  .tvf-cart-page .cart_totals,
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout .woocommerce-account-fields,
  .woocommerce-checkout #order_review {
    padding: var(--e-4);
  }

  /* Cada linea del carrito pasa a ser una tarjeta con su precio a la vista. */
  .tvf-cart-page .shop_table.cart thead {
    display: none;
  }

  .tvf-cart-page .shop_table.cart,
  .tvf-cart-page .shop_table.cart tbody,
  .tvf-cart-page .cart_item {
    display: block;
    width: 100%;
  }

  .tvf-cart-page .cart_item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty   qty";
    gap: var(--e-2) var(--e-4);
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--borde-sutil);
  }

  .tvf-cart-page .cart_item td {
    padding: 0;
    border: 0;
  }

  .tvf-cart-page .cart_item .product-thumbnail {
    grid-area: thumb;
    width: auto;
    padding: 0;
  }

  .tvf-cart-page .cart_item .product-name {
    grid-area: name;
  }

  .tvf-cart-page .cart_item .product-price {
    grid-area: price;
    width: auto;
  }

  .tvf-cart-page .cart_item .product-quantity {
    grid-area: qty;
    width: auto;
  }

  .tvf-cart-page .tvf-cart-quantity-actions {
    justify-content: space-between;
  }

  /* Formularios a una columna */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
  .woocommerce-checkout .create-account {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-3);
  }

  .tvf-cart-coupon-form {
    flex-direction: column;
  }

  .tvf-cart-coupon-form .button {
    width: 100%;
  }

  /* --- Resumen en movil -------------------------------------------------
     WooCommerce convierte shop_table_responsive en una lista: esconde el <th>
     y pinta la etiqueta con td::before a partir de data-title. Salian rotulos
     dorados y con dos puntos («Productos:»), distintos de los del escritorio.
     Se recupera la fila de dos columnas de siempre. */
  .tvf-cart-page .cart_totals table td::before,
  .tvf-cart-page .cart_totals table th::before {
    display: none !important;
    content: none !important;
  }

  /* La tabla pasa a bloque: dentro de una tabla de verdad, una fila con
     display:flex se encoge a su contenido y los separadores salian a media
     anchura. */
  .tvf-cart-page .cart_totals table,
  .tvf-cart-page .cart_totals table tbody {
    display: block;
    width: 100%;
  }

  .tvf-cart-page .cart_totals table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-2) var(--e-4);
    padding: var(--e-3) 0;
    /* Fuera los bordes que trae la tabla responsive de WooCommerce: dejaban
       rayas sueltas a media anchura entre las filas. El separador lo pone la
       propia fila, de lado a lado. */
    border: 0;
    border-bottom: 1px solid var(--borde-sutil);
  }

  .tvf-cart-page .cart_totals table tr:last-child,
  .tvf-cart-page .cart_totals table tr.order-total {
    border-bottom: 0;
  }

  .tvf-cart-page .cart_totals table.shop_table_responsive tbody th,
  .tvf-cart-page .cart_totals table.shop_table_responsive tbody td,
  .tvf-cart-page .cart_totals table th,
  .tvf-cart-page .cart_totals table td {
    border: 0;
  }

  .tvf-cart-page .cart_totals tr.order-total {
    margin-top: var(--e-2);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borde);
  }

  /* woocommerce-smallscreen.css esconde los <th> con
     `.woocommerce table.shop_table_responsive tbody th`, mas especifico que un
     selector corto. Hay que igualar el peso para recuperar las etiquetas. */
  .tvf-cart-page .cart_totals table.shop_table_responsive tbody th,
  .tvf-cart-page .cart_totals table.shop_table_responsive tbody td,
  .tvf-cart-page .cart_totals table th,
  .tvf-cart-page .cart_totals table td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
  }

  .tvf-cart-page .cart_totals table td {
    margin-left: auto;
    text-align: right;
  }

  /* Las filas que llevan bloque propio (barra de envio gratis, calculadora)
     ocupan el ancho entero. */
  .tvf-cart-page .cart_totals tr.tvf-free-shipping-notice,
  .tvf-cart-page .cart_totals tr.woocommerce-shipping-totals td {
    display: block;
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .tvf-cart-page .cart_totals tr.woocommerce-shipping-totals {
    display: block;
  }

  .tvf-cart-page .cart_totals tr.woocommerce-shipping-totals th {
    margin-bottom: var(--e-2);
  }

  .woocommerce-shipping-methods label,
  .woocommerce-shipping-destination {
    justify-content: flex-start;
    text-align: left;
  }

  /* El boton oculto de actualizar se salia del viewport por la derecha. */
  .tvf-cart-page td.actions {
    position: relative;
    overflow: hidden;
  }

  /* El globo de WhatsApp se retira del carrito y del checkout en movil:
     flotando abajo a la derecha se comia el boton de pagar, que ahi ocupa todo
     el ancho. En una pantalla cuyo unico trabajo es cobrar, nada puede taparlo.
     Sigue disponible en el resto del sitio. */
  body.woocommerce-cart .tvf-wa-btn,
  body.woocommerce-checkout .tvf-wa-btn {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   18. Movimiento reducido
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tvf-shipping-bar__fill,
  .tvf-purchase-step i,
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
  .tvf-cart-page .checkout-button,
  .woocommerce-checkout #place_order {
    transition-duration: 0.01ms;
  }
}


/* ---------------------------------------------------------------------------
   19. Boton de anadir al carrito de la ficha
   Comparte lenguaje con el resto: color plano, sin degradado ni resplandor.
   Vive aqui porque compra.css es la ultima hoja de la cascada.
   --------------------------------------------------------------------------- */

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button {
  min-height: 52px;
  padding: var(--e-3) var(--e-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--marca);
  color: var(--sobre-marca);
  font-family: var(--fuente);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background var(--mov-rapido) var(--curva-salida);
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--marca-hover);
  box-shadow: none;
}

.woocommerce div.product .single_add_to_cart_button:active {
  background: var(--marca-activa);
}


/* ---------------------------------------------------------------------------
   20. Aviso de saldo pendiente de una reserva
   Lo pinta el mu-plugin tvf-reservas-segundo-pago.php en Mi cuenta.

   Es lo primero que debe ver el cliente al entrar, asi que se le da superficie
   propia, un borde que lo separe del resto y el unico boton rojo de la
   pantalla. Cuando la reserva ya ha llegado sube de tono; mientras espera, se
   queda en informativo.
   --------------------------------------------------------------------------- */

.tvf-saldo {
  margin: 0 0 var(--e-5);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--sup-2);
}

/* Ya ha llegado: pide accion. */
.tvf-saldo--listo {
  border-color: var(--oro-borde);
  background: linear-gradient(var(--oro-tenue), var(--oro-tenue)), var(--sup-2);
}

.tvf-saldo__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}

.tvf-saldo__cabecera .tvf-icono {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--oro);
}

.tvf-saldo--espera .tvf-saldo__cabecera .tvf-icono {
  color: var(--texto-suave);
}

.tvf-saldo__cabecera h2 {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tvf-saldo__pedido {
  margin: 0 0 var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.tvf-saldo__cuentas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  margin: 0 0 var(--e-4);
  padding: var(--e-4) 0;
  border-block: 1px solid var(--borde-sutil);
}

.tvf-saldo__cuentas > div {
  min-width: 0;
}

.tvf-saldo__cuentas dt {
  margin: 0 0 var(--e-1);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.tvf-saldo__cuentas dd {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

/* El importe que hay que pagar es el dato que se busca. */
.tvf-saldo__pendiente dd {
  font-size: var(--t-2xl);
  font-weight: var(--peso-negrita);
  color: var(--texto);
}

.tvf-saldo__texto {
  margin: 0 0 var(--e-4);
  max-width: 62ch;
  font-size: var(--t-base);
  line-height: var(--alto-normal);
  color: var(--texto-suave);
}

.tvf-saldo__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: background var(--mov-rapido) var(--curva-salida);
}

.tvf-saldo__boton:hover {
  background: var(--marca-hover);
  color: var(--sobre-marca);
}

.tvf-saldo__boton--secundario {
  background: var(--sup-3);
  border: 1px solid var(--borde);
  color: var(--texto);
}

.tvf-saldo__boton--secundario:hover {
  background: var(--sup-1);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

@media (max-width: 767px) {
  .tvf-saldo {
    padding: var(--e-4);
  }

  .tvf-saldo__cuentas {
    gap: var(--e-4);
  }

  .tvf-saldo__boton {
    width: 100%;
  }
}


/* ---------------------------------------------------------------------------
   21. Detalles de Mi cuenta
   --------------------------------------------------------------------------- */

/* Acciones de la tabla de pedidos: solo «Pagar» es una accion principal.
   Tenerlas las dos en rojo hacia que ninguna destacara. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0 0 0 var(--e-2);
  padding: 0 var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-3);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mov-rapido) var(--curva-salida),
              border-color var(--mov-rapido) var(--curva-salida);
}

.woocommerce-orders-table__cell-order-actions a:first-child {
  margin-left: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-orders-table__cell-order-actions a:hover {
  background: var(--sup-2);
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button.pay,
.woocommerce-orders-table__cell-order-actions a.pay {
  border-color: transparent;
  background: var(--marca);
  color: var(--sobre-marca);
}

.woocommerce-orders-table__cell-order-actions a.pay:hover {
  background: var(--marca-hover);
  color: var(--sobre-marca);
}

/* El aviso de «confirmar correo» mete el boton ANTES del texto, asi que en
   linea quedaba el enlace suelto encima de la explicacion. Se apila. */
.woocommerce-MyAccount-content .woocommerce-info {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--e-3);
}

.woocommerce-MyAccount-content .woocommerce-info .button {
  margin: 0;
  padding: var(--e-2) var(--e-4);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--sup-3);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

/* La columna de navegacion: pildoras, sin degradado ni avatar. */
.woocommerce-MyAccount-navigation {
  padding: var(--e-4);
}


/* ---------------------------------------------------------------------------
   22. Barra de pago fijada al pie

   Con la cesta llena, la columna del pedido mide mas que la pantalla y el
   pegado al scroll no sirve: habia que bajar 900 px SOLO para ver el boton de
   pagar. Fijando al pie el bloque de terminos y boton (mas el total), la
   accion principal esta siempre a un clic, se lleven dos articulos o veinte.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order {
  position: sticky;
  bottom: 0;
  z-index: var(--z-pegajoso);
  /* El importe primero, luego la condicion, luego la accion: es el orden en el
     que se decide. WooCommerce imprime los terminos antes, asi que se reordena
     aqui sin tocar su marcado. */
  display: flex;
  flex-direction: column;
  /* Los margenes negativos la sacan hasta los bordes del panel, para que la
     franja no parezca una caja flotando dentro de otra. */
  margin: var(--e-4) calc(var(--e-5) * -1) 0;
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--sup-2);
}

.tvf-total-a-pagar {
  order: -2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde-sutil);
}

.woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
  order: -1;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order #place_order {
  order: 1;
}

.tvf-total-a-pagar span {
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.tvf-total-a-pagar strong {
  font-size: var(--t-xl);
  font-weight: var(--peso-negrita);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

@media (max-width: 1024px) {
  /* Apilada, la columna del pedido va al final de una pagina larga, asi que
     `sticky` no tiene a que anclarse: al llegar, el bloque de pago esta fuera
     de pantalla por completo. Y peor: pegado al pie de la ventana, su fondo
     tapaba la lista de pasarelas que tiene justo encima. Aqui la franja se
     fija al pie con su propio hueco reservado, que es lo que hace cualquier
     checkout decente: el importe y el boton acompanan al cliente todo el rato
     sin esconder nada. */
  .woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--borde);
    border-radius: 0;
    background: var(--sup-2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
    z-index: var(--z-flotante);
  }

  /* Hueco para que la franja no tape el final del contenido. El alto lo mide
     el JS sobre la franja de verdad (initTvfEspacioFranjaPago); el 168px es
     solo el valor de partida hasta que llega esa medida. */
  body.woocommerce-checkout {
    padding-bottom: calc(var(--tvf-alto-franja-pago, 168px) + var(--e-4));
  }

  .woocommerce-checkout .tvf-total-a-pagar {
    margin-bottom: var(--e-2);
    padding-bottom: var(--e-2);
  }

  .woocommerce-checkout .tvf-total-a-pagar strong {
    font-size: var(--t-lg);
  }

  .woocommerce-checkout #place_order {
    min-height: 50px;
    margin-top: var(--e-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout .tvf-checkout-sidebar #payment .form-row.place-order {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   36. Reservas: encargo en firme

   Ya no hay senal ni reparto de importes: se paga el articulo entero. Lo que
   si hay es una promesa que el cliente tiene que poder leer sin buscarla,
   cuando llega y hasta cuando puede cancelar el solo.
   --------------------------------------------------------------------------- */

/* Panel de la reserva en la pagina del pedido, dentro de Mi cuenta. */
.tvf-reserva-panel {
  margin: var(--e-5) 0 0;
  padding: var(--e-5);
  border: 1px solid var(--oro-borde);
  border-radius: var(--r-lg);
  background: var(--oro-tenue);
}

.tvf-reserva-panel h2 {
  margin: 0 0 var(--e-3);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tvf-reserva-panel p {
  margin: 0 0 var(--e-4);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: var(--alto-normal);
}

.tvf-reserva-panel p:last-of-type {
  margin-bottom: var(--e-4);
}

.tvf-reserva-panel strong {
  color: var(--texto);
}

/* El boton de cancelar no compite con el de comprar: es una salida, no una
   llamada a la accion. Contorno, no relleno rojo. */
.tvf-reserva-panel .tvf-reserva-cancelar,
.woocommerce .tvf-reserva-panel a.button.tvf-reserva-cancelar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--mov-rapido) var(--curva-salida),
    background var(--mov-rapido) var(--curva-salida);
}

.woocommerce .tvf-reserva-panel a.button.tvf-reserva-cancelar:hover,
.woocommerce .tvf-reserva-panel a.button.tvf-reserva-cancelar:focus-visible {
  border-color: var(--texto-suave);
  background: var(--sup-3);
  color: var(--texto);
}

/* La casilla de conformidad del checkout. Va dentro de la franja de pago, con
   el mismo tratamiento que la de terminos y condiciones para que se lean como
   lo que son: las dos cosas que hay que aceptar antes de pagar. */
.woocommerce-checkout .tvf-reserva-conforme {
  order: -1;
  margin: 0 0 var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--oro-borde);
  border-radius: var(--r-md);
  background: var(--oro-tenue);
}

.woocommerce-checkout .tvf-reserva-conforme label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e-2);
  align-items: start;
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--t-xs);
  line-height: var(--alto-normal);
}

.woocommerce-checkout .tvf-reserva-conforme input[type="checkbox"] {
  margin-top: 3px;
}

/* La fecha de llegada en cada linea de la cesta y del resumen. */
.tvf-cart-page .variation-Reserva,
.woocommerce-checkout .variation-Reserva {
  color: var(--oro);
  font-size: var(--t-xs);
}