/* ===========================================================================
   WooCommerce con los colores del tema
   ---------------------------------------------------------------------------
   El pago, el carrito y «Mi cuenta» no los pinta el tema sino WooCommerce, y
   con colores fijos de modo claro: campos #fff, texto #2b2d2f, avisos en rosa
   pálido. En claro no se notaba. En oscuro el formulario de pago quedaba con
   los campos en blanco y las etiquetas en crema encima —«Nombre», «Dirección»,
   «Departamento» con contraste 1,13, invisibles— justo en la pantalla donde
   se cobra.

   Aquí cada uno de esos colores se ata a los tokens del tema, en los dos
   modos: el pago se ve como el resto de la tienda y cambia con ella.

   Casi sólo color. La forma de los campos —esquinas, rellenos, tamaños— sigue
   siendo la de WooCommerce: cambiarla sería rediseñar el pago, no arreglarlo.
   La única excepción es la fila del carrito en el teléfono, al final, porque
   se salía de la pantalla.

   `body.mtl` delante de cada regla: no controlamos en qué orden se imprimen
   las hojas de los bloques de WooCommerce respecto de la nuestra, y con la
   misma especificidad gana la última. La clase del body suma lo justo para
   ganar siempre, sin !important salvo donde WooCommerce ya lo usa.
   =========================================================================== */

/* ---------- lo que WooCommerce ya deja configurar ----------
   El CSS clásico —«Mi cuenta», el acceso, las direcciones— lee estas
   variables: basta con dárselas. */
body.mtl {
	--wc-form-color-background: var(--mtl-surface);
	--wc-form-color-text: var(--mtl-ink);
	/* Con la línea del tema los campos casi no se ven en claro: un borde de
	   campo tiene que distinguirse del fondo. */
	--wc-form-border-color: color-mix(in srgb, var(--mtl-ink) 55%, transparent);
	--wc-red: var(--mtl-alerta);
	--wc-destructive: var(--mtl-alerta);
	--wc-green: var(--mtl-exito);
	--wc-highlight: var(--mtl-gold);
	--wc-primary: var(--mtl-accent);
	--wc-primary-text: var(--mtl-on-accent);
	--wc-secondary: var(--mtl-surface);
	--wc-secondary-text: var(--mtl-ink);
	--wc-subtext: var(--mtl-muted);
	--wc-content-bg: var(--mtl-bg);
}

/* Casillas y radios nativos: el marcado toma el color del texto, no el azul
   del sistema. Los de los bloques no son nativos y no se enteran. */
body.mtl input:is([type="checkbox"], [type="radio"]) { accent-color: var(--mtl-ink); }

/* ---------- campos del pago ----------
   Sólo fondo y color. La etiqueta flotante hereda el color y el borde usa
   currentColor, así que se corrigen solos con esto. */
body.mtl .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]),
body.mtl .wc-block-components-text-input input:is([type="email"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="url"]):focus,
body.mtl .wc-block-components-textarea,
body.mtl .wc-block-components-textarea:focus,
body.mtl .wc-block-components-textarea:not(:placeholder-shown),
body.mtl .wc-block-gateway-container .wc-block-gateway-input,
body.mtl .wc-block-gateway-container .wc-block-gateway-input:focus,
body.mtl .wc-block-gateway-container:focus {
	background-color: var(--mtl-surface);
	color: var(--mtl-ink);
}
/* El área de texto era la única con el borde en un gris fijo. */
body.mtl .wc-block-components-textarea { border-color: color-mix(in srgb, currentColor 80%, transparent); }
body.mtl .wc-block-components-textarea:focus { border-color: currentColor; box-shadow: inset 0 0 0 .5px currentColor; }
body.mtl .wc-block-gateway-container label { color: var(--mtl-muted); }

/* El autocompletado del navegador pone su propio fondo claro y no deja
   cambiarlo: se tapa con una sombra interior del color del campo. Es como
   llena el formulario casi todo el mundo desde el teléfono. */
body.mtl .wc-block-components-text-input input:-webkit-autofill,
body.mtl .woocommerce form .form-row .input-text:-webkit-autofill {
	-webkit-text-fill-color: var(--mtl-ink);
	caret-color: var(--mtl-ink);
	box-shadow: inset 0 0 0 100px var(--mtl-surface);
}

/* ---------- desplegables del pago: país y departamento ---------- */
body.mtl .wc-blocks-components-select .wc-blocks-components-select__container { background: var(--mtl-surface); }
body.mtl .wc-blocks-components-select .wc-blocks-components-select__select { color: var(--mtl-ink); }
body.mtl .wc-blocks-components-select .wc-blocks-components-select__select option { background: var(--mtl-surface); color: var(--mtl-ink); }
body.mtl .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--mtl-muted); }
body.mtl .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--mtl-ink); }

/* ---------- casillas y opciones de los bloques ---------- */
body.mtl .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body.mtl .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
body.mtl .wc-block-components-radio-control .wc-block-components-radio-control__input { background-color: var(--mtl-surface); }
body.mtl .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--mtl-ink); }
body.mtl .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--mtl-ink); }

/* ---------- errores ----------
   El rojo de WooCommerce (#cc1818) se queda en 3,4:1 sobre negro, por debajo
   del mínimo para texto; el del tema está calibrado para los dos fondos. Van
   después de lo anterior y con más especificidad: si no, el color normal de
   la etiqueta taparía el aviso de error. */
body.mtl .wc-block-components-validation-error,
body.mtl .wc-block-components-text-input.has-error label,
body.mtl .wc-block-components-checkbox.has-error,
body.mtl .wc-block-components-checkbox.has-error a,
body.mtl .has-error .wc-blocks-components-select .wc-blocks-components-select__label,
body.mtl .has-error .wc-blocks-components-select .wc-blocks-components-select__select { color: var(--mtl-alerta); }
body.mtl .has-error .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--mtl-alerta); }

/* ---------- avisos ----------
   El estado va en el borde y en el icono, no en un fondo pastel: un rosa
   claro sobre negro es otra isla blanca en mitad del pago. */
body.mtl .wc-block-components-notice-banner {
	background-color: var(--mtl-surface);
	border-color: var(--mtl-line);
	color: var(--mtl-ink);
}
body.mtl .wc-block-components-notice-banner > svg { background-color: var(--mtl-ink); fill: var(--mtl-bg); }
body.mtl .wc-block-components-notice-banner.is-error { background-color: color-mix(in srgb, var(--mtl-alerta) 12%, var(--mtl-surface)); border-color: var(--mtl-alerta); }
body.mtl .wc-block-components-notice-banner.is-error > svg { background-color: var(--mtl-alerta); }
body.mtl .wc-block-components-notice-banner.is-success { background-color: color-mix(in srgb, var(--mtl-exito) 12%, var(--mtl-surface)); border-color: var(--mtl-exito); }
body.mtl .wc-block-components-notice-banner.is-success > svg { background-color: var(--mtl-exito); }
body.mtl .wc-block-components-notice-banner.is-warning { background-color: color-mix(in srgb, var(--mtl-gold) 12%, var(--mtl-surface)); border-color: var(--mtl-gold); }
body.mtl .wc-block-components-notice-banner.is-warning > svg { background-color: var(--mtl-gold); }
body.mtl .wc-block-components-notice-banner.is-info { border-color: var(--mtl-ink); }
/* WooCommerce los fija con !important; sólo así se les gana. */
body.mtl .wc-block-components-notice-banner > .wc-block-components-button,
body.mtl .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { color: var(--mtl-ink) !important; }

body.mtl .woocommerce-error,
body.mtl .woocommerce-info,
body.mtl .woocommerce-message { background-color: var(--mtl-surface); color: var(--mtl-ink); }
body.mtl .woocommerce-message { border-top-color: var(--mtl-exito); }
body.mtl .woocommerce-info { border-top-color: var(--mtl-ink); }
body.mtl .woocommerce-error { border-top-color: var(--mtl-alerta); }

/* ---------- resumen, insignias, botones ---------- */
body.mtl .wc-block-components-product-sale-badge { background: transparent; border-color: currentColor; color: var(--mtl-ink); }
body.mtl .wc-block-components-chip .wc-block-components-chip__remove { background: var(--mtl-line); }
body.mtl .wc-block-components-chip .wc-block-components-chip__remove-icon { fill: var(--mtl-ink); }
body.mtl .wc-block-components-error,
body.mtl .wc-block-components-error__header,
body.mtl .wc-block-components-error__text,
body.mtl .wc-block-components-error__message { color: var(--mtl-muted); }

/* El icono de «procesando» del botón de pagar era blanco fijo: sobre el botón
   claro del modo oscuro, invisible justo mientras se cobra. */
body.mtl .wc-block-components-checkout-place-order-button .wc-block-components-button__text > svg { fill: var(--mtl-on-accent); }
body.mtl .wc-block-components-button:not(.is-link).is-style-outline:hover,
body.mtl .wc-block-components-button:not(.is-link).outlined:hover { background-color: var(--mtl-ink); color: var(--mtl-bg); }
/* La regla de WooCommerce empieza por `body:not(…)`: hace falta `html` para
   superarla. */
html body.mtl .wc-block-components-button:not(.is-link).text { color: var(--mtl-ink); }

/* La barra fija de «Proceder al pago» del carrito en el teléfono era blanca. */
@media (max-width: 782px) {
	body.mtl .wc-block-cart .wc-block-cart__submit-container--sticky { background: var(--mtl-bg); }
}

/* ---------- formularios clásicos: «Mi cuenta» y direcciones ---------- */
body.mtl .woocommerce form .form-row .input-text,
body.mtl .woocommerce form .form-row select,
body.mtl .woocommerce form .form-row textarea { color: var(--mtl-ink); }
body.mtl .select2-container--default .select2-selection--single { background-color: var(--mtl-surface); border-color: var(--wc-form-border-color); }
body.mtl .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--mtl-bg); color: var(--mtl-ink); border-color: var(--mtl-line); }
body.mtl .select2-dropdown { border-color: var(--mtl-line); }

/* ---------- el carrito en el teléfono ----------
   En pantallas estrechas WooCommerce pinta cada fila como una rejilla de
   columnas fijas (80px 132px) con el total a la derecha, y la etiqueta de
   ahorro no se parte de línea. Con un producto en oferta —«Guardar $ 280.000»
   ocupa 109px— la fila medía 384px en una pantalla de 375: la página entera
   se ensanchaba y los precios salían cortados por el borde.

   La columna del medio puede encoger y la etiqueta partirse en dos líneas.
   Las dos reglas van en la misma consulta de contenedor que usa WooCommerce:
   en pantallas anchas, donde la fila es una tabla normal y la etiqueta cabe en
   una línea, no cambia nada. */
@container (max-width: 699px) {
	body.mtl .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 132px); }
	body.mtl .wc-block-cart-items .wc-block-components-product-badge { white-space: normal; text-align: right; }
}