/* =========================================================================
   MCI Checkout UI — mejoras visuales de carrito y checkout
   =========================================================================

   Este archivo no reordena campos del formulario. Solo cambia presentacion.

   UNICA excepcion: la seccion 13 oculta los campos de direccion cuando el
   cliente elige Retiro en tienda con Boleta. Ese ocultamiento NO se sostiene
   solo con CSS — va acompanado de checkout.js, que quita el atributo
   `required`, y de un filtro en PHP que relaja la validacion en servidor.
   Los tres tienen que moverse juntos.

   Depende de los design tokens que ya define Woodmart (--wd-form-*,
   --color-gray-*, --wd-brd-radius). Todos llevan fallback por si el tema
   cambia de version.

   Indice:
     1. Variables locales
     2. Layout de dos columnas
     3. Tipografia y encabezados
     4. Campos del formulario
     5. Selects de Region y Comuna (bx-districts)
     6. Radio Boleta / Factura
     7. Tabla de resumen del pedido + punto PUDO
     8. Metodos de pago
     9. Boton de pago
    10. Cupon y avisos
    11. Carrito: no preguntar por el despacho todavia
    12. Movil
    13. Modo de entrega: Envio / Retiro
    14. Titulos de seccion y ajustes de campos
    15. Bloque "Tu pedido": tarjeta, secciones y sellos
    16. Correcciones sobre el bloque "Tu pedido"
    17. Afinado: bordes, alineacion y escala tipografica
    18. Bordes del pie de la tabla: estado determinista
    19. Formulario de entrega: tarjeta y secciones numeradas
    20. Disposicion de los campos: flex en vez del grid de Woodmart
    21. Estado seleccionado uniforme
    22. Avisos superiores: acceso de cliente y cupon
    23. Estado inicial sin parpadeo
    24. El tercer hijo del formulario
    25. El espacio sobre "Entrega"
    26. Linea bajo el Subtotal y aire en el Total
    27. Doble asterisco en Comuna
    28. Campos de empresa: etiqueta de obligatorio con Factura
    29. Titulo de la seccion de direccion, segun el documento
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Variables locales
   ------------------------------------------------------------------------- */

.woocommerce-checkout,
.woocommerce-cart {
	--mci-gap: 40px;
	--mci-col-form: 57%;
	--mci-col-review: 43%;

	--mci-radius: 8px;
	--mci-field-h: 48px;

	--mci-brd: var(--color-gray-200, #f1f1f1);
	--mci-brd-strong: var(--color-gray-300, #bbb);
	--mci-bg-soft: var(--color-gray-100, #f7f7f7);
	--mci-text-muted: var(--color-gray-500, #767676);

	--mci-focus: var(--wd-primary-color, #333);
	--mci-error: #ca1919;
}


/* -------------------------------------------------------------------------
   2. Layout de dos columnas

   Absorbe la regla que vivia en el post custom-css-js 56265, que solo
   declaraba display:flex sin definir anchos ni separacion. Aqui se fija
   proporcion, gap y alineacion.
   ------------------------------------------------------------------------- */

@media (min-width: 778px) {

	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: var(--mci-gap);
	}

	/* El `gap` se resta de las bases a proposito.

	   Con `flex-basis` 57% + 43% = 100% MAS un gap de 40px, la linea desborda
	   el contenedor y depende del encogimiento para caber. La columna derecha
	   no encogia lo que le tocaba (Woodmart le declara `flex: 1 0 0`, con
	   shrink 0), asi que el ancho total quedaba ~40px corto y el borde derecho
	   no cuadraba con los avisos de arriba.

	   Restando medio gap a cada base, la suma da exactamente el ancho del
	   contenedor: no hay desborde y el resultado no depende de como encoja
	   cada columna. */
	.woocommerce-checkout form.checkout > .customer-details {
		flex: 1 1 calc(var(--mci-col-form) - (var(--mci-gap) / 2));
		min-width: 0;
	}

	.woocommerce-checkout form.checkout > .checkout-order-review {
		flex: 1 1 calc(var(--mci-col-review) - (var(--mci-gap) / 2));
		min-width: 0;
	}

	/* El resumen como tarjeta: es la senal visual mas reconocible de un
	   checkout tipo Shopify. */
	.woocommerce-checkout form.checkout > .checkout-order-review {
		padding: 28px;
		border: 1px solid var(--mci-brd);
		border-radius: var(--mci-radius);
		background-color: var(--mci-bg-soft);
	}
}


/* -------------------------------------------------------------------------
   3. Tipografia y encabezados
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.woocommerce-checkout #order_review_heading {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--mci-brd);
}

/* Separacion entre bloques de campos */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin-bottom: 32px;
}


/* -------------------------------------------------------------------------
   4. Campos del formulario

   Altura, borde, radio y foco consistentes. Hoy conviven campos generados
   por WooCommerce, por woo-checkout-field-editor-pro y por bx-districts,
   cada uno con su propio aspecto.
   ------------------------------------------------------------------------- */

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

.woocommerce-checkout form.checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mci-text-muted);
}

.woocommerce-checkout form.checkout .form-row label .required {
	border: 0;
	color: var(--mci-error);
	text-decoration: none;
}

.woocommerce-checkout form.checkout .form-row .input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout .form-row textarea {
	width: 100%;
	min-height: var(--mci-field-h);
	padding: 10px 14px;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: var(--wd-form-bg, #fff);
	color: var(--wd-form-color, inherit);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-checkout form.checkout .form-row textarea {
	min-height: 96px;
	padding-top: 12px;
	resize: vertical;
}

.woocommerce-checkout form.checkout .form-row .input-text::placeholder,
.woocommerce-checkout form.checkout .form-row textarea::placeholder {
	color: var(--wd-form-placeholder-color, #a5a5a5);
}

.woocommerce-checkout form.checkout .form-row .input-text:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus {
	outline: 0;
	border-color: var(--mci-focus);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

/* Campo en error: WooCommerce marca la fila con .woocommerce-invalid */
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select {
	border-color: var(--mci-error);
}

/* Mitades: WooCommerce usa form-row-first / form-row-last con float.
   Se pasan a un grid de dos columnas sin tocar el marcado. */
@media (min-width: 600px) {

	.woocommerce-checkout form.checkout .form-row-first,
	.woocommerce-checkout form.checkout .form-row-last {
		float: none;
		width: calc(50% - 9px);
		display: inline-block;
		vertical-align: top;
	}

	.woocommerce-checkout form.checkout .form-row-first {
		margin-right: 14px;
	}
}

/* El error en vivo de RUT que inyecta el plugin email-notification */
.woocommerce-checkout .rutError,
.woocommerce-checkout .rutEmpresaError {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mci-error);
}


/* -------------------------------------------------------------------------
   5. Selects de Region y Comuna

   El select de Comuna lo genera el filtro woocommerce_form_field_city de
   bx-districts / bluex-for-woocommerce, por lo que no hereda los estilos
   del tema y hoy se ve distinto al resto. Aqui se iguala.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout #billing_state_field select,
.woocommerce-checkout form.checkout #billing_city_field select,
.woocommerce-checkout form.checkout #shipping_state_field select,
.woocommerce-checkout form.checkout #shipping_city_field select {
	width: 100%;
	min-height: var(--mci-field-h);
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: var(--wd-form-bg, #fff);
	font-size: 15px;
	appearance: none;
	background-image: var(--wd-form-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

/* Select2, si el tema lo aplica sobre Region */
.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
	height: var(--mci-field-h);
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
}

.woocommerce-checkout form.checkout .select2-container .select2-selection--single
	.select2-selection__rendered {
	line-height: calc(var(--mci-field-h) - 2px);
	padding-left: 14px;
}


/* -------------------------------------------------------------------------
   6. Radio Boleta / Factura

   Campo additional_informative (obligatorio) de woo-checkout-field-editor-pro,
   con clase .informeta. Se presenta como opciones seleccionables en vez de
   radios sueltos.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row.informeta {
	padding: 18px;
	border: 1px solid var(--mci-brd);
	border-radius: var(--mci-radius);
	background-color: var(--mci-bg-soft);
}

.woocommerce-checkout form.checkout .form-row.informeta > label {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}

/* Marcado real (verificado en el HTML del sitio):
     <p class="form-row informeta" id="additional_informative_field">
       <label>Por favor ingrese...</label>
       <span class="woocommerce-input-wrapper">
         <input type="radio" id="..._Boleta" checked>
         <label for="..._Boleta" class="radio">Boleta</label>
         <input type="radio" id="..._Factura">
         <label for="..._Factura" class="radio">Factura</label>
       </span>
     </p>
   Los <input> son HERMANOS de los <label>, no van dentro. Por eso se oculta
   el radio nativo y el estado se pinta con input:checked + label. */

.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Radio accesible pero invisible: sigue siendo enfocable y lo anuncian los
   lectores de pantalla. No usar display:none, que lo sacaria del foco. */
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper label.radio {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper label.radio:hover {
	border-color: var(--mci-focus);
}

.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"]:checked + label.radio {
	border-color: var(--mci-focus);
	box-shadow: inset 0 0 0 1px var(--mci-focus);
	font-weight: 600;
}

/* Foco por teclado: sin esto, ocultar el radio dejaria la opcion
   inalcanzable visualmente al tabular. */
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--mci-focus);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   7. Tabla de resumen del pedido + punto PUDO

   El selector de punto PUDO de BlueExpress se inyecta en el hook
   woocommerce_review_order_after_order_total, es decir DENTRO de esta tabla.
   No se toca su marcado, solo se le da aire y legibilidad.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	margin-bottom: 24px;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--mci-brd);
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	font-weight: 500;
	text-align: left;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	text-align: right;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	text-align: left;
	color: inherit;
	font-weight: 500;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table
	.product-quantity {
	color: var(--mci-text-muted);
	font-weight: 400;
}

/* Total: destacado y sin borde inferior */
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	padding-top: 18px;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	color: inherit;
}

/* Fila de metodos de entrega: los radios de envio necesitan aire.
   Incluye las filas que inyecta BlueExpress con el selector PUDO. */
.woocommerce-checkout .woocommerce-shipping-totals td,
.woocommerce-checkout .woocommerce-shipping-totals th {
	text-align: left;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--mci-brd);
	border-radius: var(--mci-radius);
	background-color: #fff;
	line-height: 1.4;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label {
	margin: 0;
	font-size: 14px;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li input {
	margin-top: 3px;
	accent-color: var(--mci-focus);
}

/* Selector de punto PUDO de BlueExpress dentro del resumen */
.woocommerce-checkout .checkout-order-review select[name*="pudo"],
.woocommerce-checkout .checkout-order-review select[id*="pudo"] {
	width: 100%;
	min-height: 44px;
	margin-top: 10px;
	padding: 8px 12px;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: #fff;
	font-size: 14px;
}


/* -------------------------------------------------------------------------
   8. Metodos de pago

   Klap y Transbank redirigen fuera del sitio al enviar. Aqui solo se
   presentan como tarjetas seleccionables.
   ------------------------------------------------------------------------- */

.woocommerce-checkout #payment {
	border-radius: var(--mci-radius);
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Marcado real: el <input type=radio> es HERMANO del <label>, y el
   <div class="payment_box"> es el tercer hijo del <li>. Por eso el
   contenedor flex es el <li>, no el <label>. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 10px;
	padding: 0;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: var(--mci-focus);
}

/* Metodo seleccionado: se detecta con :has() sobre el radio marcado.
   Si el navegador no soporta :has(), simplemente no se resalta. */
.woocommerce-checkout #payment ul.payment_methods
	li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--mci-focus);
	box-shadow: 0 0 0 1px var(--mci-focus);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method
	> input[type="radio"] {
	flex: 0 0 auto;
	margin: 0 0 0 16px;
	accent-color: var(--mci-focus);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img {
	max-height: 26px;
	width: auto;
	margin: 0 0 0 auto;
}

/* Caja de descripcion del metodo (datos de transferencia de BACS, texto de
   Klap, etc.). Ocupa una fila completa bajo el label. */
.woocommerce-checkout #payment div.payment_box {
	flex: 0 0 100%;
	margin: 0;
	padding: 0 16px 16px;
	border-radius: 0;
	background-color: transparent;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mci-text-muted);
}

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

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}


/* -------------------------------------------------------------------------
   9. Boton de pago
   ------------------------------------------------------------------------- */

.woocommerce-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	padding: 16px 24px;
	border-radius: var(--mci-radius);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Terminos y condiciones */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.6;
}


/* -------------------------------------------------------------------------
   10. Cupon y avisos
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	margin-bottom: 24px;
}

.woocommerce-checkout form.checkout_coupon {
	padding: 18px;
	border: 1px solid var(--mci-brd);
	border-radius: var(--mci-radius);
	background-color: var(--mci-bg-soft);
}

/* Aviso del plugin "message" (plazos de BlueExpress) sobre el bloque de
   facturacion. Se le da formato de nota informativa. */
.woocommerce-checkout #texto-informativo-checkout {
	margin-bottom: 24px;
	padding: 16px 18px;
	border: 1px solid var(--mci-brd);
	border-left: 3px solid var(--mci-focus);
	border-radius: var(--mci-radius);
	background-color: var(--mci-bg-soft);
	font-size: 13px;
	line-height: 1.6;
}

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	margin-bottom: 24px;
	border-radius: var(--mci-radius);
}


/* -------------------------------------------------------------------------
   11. Carrito: no preguntar por el despacho todavia

   El carrito preguntaba por despacho o retiro antes de que el cliente
   hubiera decidido nada: selector Blue Express / Retiro en tienda,
   direccion de destino y calculador de Region / Comuna. Esa decision
   corresponde al checkout, no al carrito.

   Se ocultan la fila de envio y la fila de Total. El Total se oculta a
   proposito: WooCommerce lo sigue calculando CON el costo de despacho, asi
   que dejarlo visible mostraria una diferencia respecto al Subtotal que el
   cliente no tendria como explicarse.

   Queda: Subtotal + boton Finalizar compra. Es el patron de Shopify.

   IMPORTANTE: el boton "Finalizar compra" (.wc-proceed-to-checkout) vive
   DENTRO de .cart_totals y es la unica via al checkout desde el carrito.
   Nunca ocultar .cart_totals completo.

   Esto reemplaza la regla anterior que forzaba el calculador siempre
   abierto (que a su vez reemplazaba el <script> de 5 segundos de la pagina
   11). Al ocultarse la fila entera, ese calculador ya no se muestra y esas
   reglas dejaron de tener sentido.
   ------------------------------------------------------------------------- */

.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals tr.order-total {
	display: none;
}

/* Aviso que reemplaza al Total ocultado, justo sobre el boton. */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout::before {
	content: "El despacho se calcula en el siguiente paso.";
	display: block;
	margin-bottom: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--mci-brd);
	font-size: 13px;
	line-height: 1.5;
	color: var(--mci-text-muted);
}

.woocommerce-cart .cart_totals tr.cart-subtotal th,
.woocommerce-cart .cart_totals tr.cart-subtotal td {
	padding-bottom: 4px;
	font-size: 16px;
}


/* -------------------------------------------------------------------------
   12. Movil
   ------------------------------------------------------------------------- */

@media (max-width: 777px) {

	.woocommerce-checkout form.checkout > .checkout-order-review {
		margin-top: 32px;
		padding: 20px;
		border: 1px solid var(--mci-brd);
		border-radius: var(--mci-radius);
		background-color: var(--mci-bg-soft);
	}

	.woocommerce-checkout form.checkout .form-row .input-text,
	.woocommerce-checkout form.checkout .form-row select,
	.woocommerce-checkout form.checkout #billing_state_field select,
	.woocommerce-checkout form.checkout #billing_city_field select,
	.woocommerce-checkout form.checkout #shipping_state_field select,
	.woocommerce-checkout form.checkout #shipping_city_field select {
		/* 16px evita que iOS Safari haga zoom al enfocar el campo */
		font-size: 16px;
	}

	.woocommerce-checkout form.checkout .form-row.informeta label:not(:first-child),
	.woocommerce-checkout form.checkout .form-row.informeta li label {
		flex: 1 1 auto;
		justify-content: center;
	}

	.woocommerce-checkout #place_order {
		min-height: 52px;
		font-size: 17px;
	}
}


/* -------------------------------------------------------------------------
   13. Modo de entrega: Envio / Retiro

   El selector lo pinta el plugin en `woocommerce_before_checkout_billing_form`
   (prioridad 5), justo bajo el titulo "Entrega".

   La caja de retiro se renderiza siempre y aqui se decide si se ve, para que
   el cambio de modo sea instantaneo y no dependa de una vuelta de AJAX.

   Las clases `mci-mode-*` y `mci-hide-address` las mantiene checkout.js sobre
   `form.checkout`.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .mci-delivery {
	margin-bottom: 28px;
}

.woocommerce-checkout .mci-delivery-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.woocommerce-checkout .mci-delivery-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--mci-brd-strong);
	border-radius: var(--mci-radius);
	background-color: #fff;
	color: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.woocommerce-checkout .mci-delivery-option:hover {
	border-color: var(--mci-focus);
	background-color: #fff;
	color: inherit;
}

.woocommerce-checkout .mci-delivery-option[aria-pressed="true"] {
	border-color: var(--mci-focus);
	box-shadow: inset 0 0 0 1px var(--mci-focus);
	font-weight: 600;
}

.woocommerce-checkout .mci-delivery-option:focus-visible {
	outline: 2px solid var(--mci-focus);
	outline-offset: 2px;
}

/* Caja con la direccion de retiro: solo visible en modo Retiro. */
.woocommerce-checkout .mci-pickup-info {
	display: none;
	margin-top: 16px;
	padding: 18px;
	border: 1px solid var(--mci-brd);
	border-radius: var(--mci-radius);
	background-color: var(--mci-bg-soft);
}

.woocommerce-checkout form.checkout.mci-mode-pickup .mci-pickup-info {
	display: block;
}

.woocommerce-checkout .mci-pickup-info p {
	margin: 0;
	line-height: 1.5;
}

.woocommerce-checkout .mci-pickup-info__title {
	margin-bottom: 4px !important;
	font-size: 15px;
	font-weight: 600;
}

.woocommerce-checkout .mci-pickup-info__address {
	font-size: 14px;
}

.woocommerce-checkout .mci-pickup-info__note {
	margin-top: 10px !important;
	font-size: 13px;
	color: var(--mci-text-muted);
}

/* Retiro + Boleta: la direccion no hace falta.
   Con Factura reaparece, porque ahi es dato tributario — esa decision la toma
   checkout.js poniendo o quitando `mci-hide-address`.
   El atributo `required` lo gestiona el JS y el servidor por separado: ocultar
   por CSS no basta, la validacion tambien tiene que ceder. */
.woocommerce-checkout form.checkout.mci-hide-address #billing_address_1_field,
.woocommerce-checkout form.checkout.mci-hide-address #billing_address_2_field,
.woocommerce-checkout form.checkout.mci-hide-address #billing_postcode_field,
.woocommerce-checkout form.checkout.mci-hide-address #billing_state_field,
.woocommerce-checkout form.checkout.mci-hide-address #billing_city_field {
	display: none;
}

@media (max-width: 480px) {

	.woocommerce-checkout .mci-delivery-switch {
		gap: 8px;
	}

	.woocommerce-checkout .mci-delivery-option {
		min-height: 48px;
		padding: 10px 12px;
		font-size: 14px;
	}
}

/* Iconos en linea del selector y de la caja de retiro. */
.woocommerce-checkout .mci-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.woocommerce-checkout .mci-delivery-option {
	gap: 10px;
}

.woocommerce-checkout .mci-pickup-info__ready {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px !important;
	font-size: 13px;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .mci-pickup-info__ready .mci-icon {
	width: 16px;
	height: 16px;
}

.woocommerce-checkout .mci-pickup-info__note {
	margin-top: 6px !important;
}

/* Campos de empresa: solo con Factura.

   `billing_company`, `billing_giro` y `rut_empresa` no tienen sentido en una
   boleta. Los tres son opcionales en woo-checkout-field-editor-pro, asi que
   ocultarlos no requiere tocar validacion — a diferencia de la direccion.

   La clase la mantiene checkout.js escuchando el radio additional_informative.

   Los valores ya escritos NO se borran al cambiar a Boleta: si el cliente
   vuelve a Factura los recupera. */
.woocommerce-checkout form.checkout.mci-invoice-boleta #billing_company_field,
.woocommerce-checkout form.checkout.mci-invoice-boleta #billing_giro_field,
.woocommerce-checkout form.checkout.mci-invoice-boleta #rut_empresa_field {
	display: none;
}


/* -------------------------------------------------------------------------
   14. Titulos de seccion y ajustes de campos
   ------------------------------------------------------------------------- */

/* --- Titulos de seccion ------------------------------------------------- */

.woocommerce-checkout .mci-section-heading {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/* "Información para despacho": solo en modo Envio. */
.woocommerce-checkout .mci-section-heading--shipping {
	display: none;
	margin-top: 28px;
}

.woocommerce-checkout form.checkout.mci-mode-shipping .mci-section-heading--shipping {
	display: block;
}

/* El titulo "Información adicional para Factura" se hacia aqui con un ::before
   sobre #billing_company_field. Se reemplazo por una seccion real, inyectada
   con el filtro `woocommerce_form_field` (ver seccion 19), que ademas se puede
   traducir y lleva icono y subtitulo como el resto. */

/* --- "¿Enviar a una dirección diferente?" solo con Factura --------------

   El checkbox lo desmarca checkout.js al cambiar a Boleta, para que no queden
   campos de envio ocultos viajando en el POST. */
.woocommerce-checkout form.checkout.mci-invoice-boleta #ship-to-different-address,
.woocommerce-checkout form.checkout.mci-invoice-boleta .woocommerce-shipping-fields {
	display: none;
}

/* --- Area de comentarios ------------------------------------------------ */

.woocommerce-checkout form.checkout #order_comments {
	min-height: 84px;
}


/* -------------------------------------------------------------------------
   15. Bloque "Tu pedido": tarjeta, secciones y sellos de confianza

   Acompana a los encabezados que inyecta el PHP por hooks. Deliberadamente
   sin grid: se usa flujo normal y flex, que es lo que ya funcionaba.

   El azul es el de marca del tema (--wd-primary-color = rgb(0,80,211)); el
   fallback repite ese mismo valor por si el tema deja de definirlo.
   ------------------------------------------------------------------------- */

.woocommerce-checkout {
	--mci-accent: var(--wd-primary-color, #0050d3);
	--mci-accent-soft: rgba(0, 80, 211, .06);
	--mci-accent-brd: rgba(0, 80, 211, .45);
}

/* --- La tarjeta contenedora --------------------------------------------- */

.woocommerce-checkout form.checkout > .checkout-order-review {
	padding: 28px;
	border: 1px solid var(--mci-brd);
	border-radius: 14px;
	background-color: #fff;
}

/* --- Encabezado: bolsa + titulo + subtitulo + sello --------------------- */

.woocommerce-checkout #order_review_heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 24px;
	font-weight: 700;
}

.woocommerce-checkout #order_review_heading::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-checkout .mci-review-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.woocommerce-checkout .mci-review-head__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .mci-review-head__badge {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: 0 0 auto;
	text-align: right;
}

.woocommerce-checkout .mci-review-head__badge .mci-icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--mci-accent);
}

.woocommerce-checkout .mci-review-head__badge strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mci-accent);
}

.woocommerce-checkout .mci-review-head__badge small {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mci-text-muted);
}

/* --- Encabezados de seccion (entrega / pago) ---------------------------- */

.woocommerce-checkout .mci-block-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.woocommerce-checkout .mci-block-head__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: var(--mci-accent-soft);
	color: var(--mci-accent);
}

.woocommerce-checkout .mci-block-head__icon .mci-icon {
	width: 20px;
	height: 20px;
}

.woocommerce-checkout .mci-block-head__text strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce-checkout .mci-block-head__text small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .mci-section-row > td {
	padding: 26px 0 14px !important;
	border-bottom: 0 !important;
}

.woocommerce-checkout .mci-section-block {
	margin: 26px 0 14px;
}

/* --- Tabla de productos como tarjeta interna ---------------------------- */

.woocommerce-checkout .wd-table-wrapper {
	border: 1px solid var(--mci-brd);
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	margin-bottom: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	padding: 14px 18px;
	border-bottom: 1px solid var(--mci-brd);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .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 {
	padding: 16px 18px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--mci-accent);
	font-weight: 600;
}

/* Total destacado, con fondo propio como en la referencia. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	padding: 20px 18px;
	border-top: 1px solid var(--mci-brd);
	background-color: var(--mci-bg-soft);
	font-size: 20px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	color: var(--mci-accent);
}

/* La fila de envio pasa a ocupar el ancho completo: su <th> "Envío" sobra
   porque ahora hay un encabezado de seccion propio arriba. */
.woocommerce-checkout .woocommerce-shipping-totals > th {
	display: none;
}

.woocommerce-checkout .woocommerce-shipping-totals > td {
	display: block;
	width: 100%;
	padding-top: 0 !important;
}

/* --- Opciones de entrega y de pago como tarjetas ------------------------ */

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	border: 1px solid var(--mci-brd-strong);
	border-radius: 12px;
	background-color: #fff;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li {
	position: relative;
	flex-wrap: wrap;
	padding: 16px;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li p {
	flex: 0 0 100%;
	margin: 4px 0 0 28px;
	font-size: 12px;
	color: var(--mci-text-muted);
}

/* Estado seleccionado. Si el navegador no soporta :has() simplemente no se
   resalta; la seleccion sigue siendo evidente por el radio. */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--mci-accent-brd);
	box-shadow: inset 0 0 0 1px var(--mci-accent-brd);
	background-color: var(--mci-accent-soft);
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li input,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	accent-color: var(--mci-accent);
	width: 18px;
	height: 18px;
}

/* --- Boton de pago y sello SSL ------------------------------------------ */

.woocommerce-checkout #place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 58px;
	border-radius: 12px;
	font-size: 16px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.woocommerce-checkout #place_order::before {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-checkout .mci-ssl-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .mci-ssl-note .mci-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

@media (max-width: 777px) {

	.woocommerce-checkout form.checkout > .checkout-order-review {
		padding: 20px;
	}

	.woocommerce-checkout .mci-review-head {
		flex-direction: column;
		gap: 10px;
	}

	.woocommerce-checkout .mci-review-head__badge {
		text-align: start;
	}
}


/* -------------------------------------------------------------------------
   16. Correcciones sobre el bloque "Tu pedido"

   NOTA SOBRE LOS !important DE ESTE BLOQUE

   Woodmart agrupa sus reglas del resumen asi:

       :is(.woocommerce-checkout > .checkout-order-review,
           .woocommerce-order-pay #order_review) { ... }

   `:is()` toma la especificidad de su argumento MAS especifico, y el segundo
   lleva un ID. La regla queda en (1,1,0) y le gana a cualquier selector de
   clases. Como `.checkout-order-review` no tiene ID propio, no hay forma de
   igualarla sin `!important`. Se usa solo donde ese conflicto lo obliga.
   ------------------------------------------------------------------------- */

/* Fondo blanco y padding propio (el tema fuerza gris #f7f7f7 y 30px). */
.woocommerce-checkout form.checkout > .checkout-order-review {
	padding: 28px !important;
	background-color: #fff !important;
}

/* Borde dentado tipo boleta arriba y abajo: fuera.
   Lo dibuja el tema con radial-gradient en ::before y ::after. */
.woocommerce-checkout form.checkout > .checkout-order-review::before,
.woocommerce-checkout form.checkout > .checkout-order-review::after {
	display: none !important;
}

/* El tema le pone al envoltorio de la tabla `padding: 5px 25px` y una sombra.
   Ese padding se sumaba al de las celdas y descuadraba la fila de Total, que
   quedaba con la franja gris corrida respecto al borde de la tarjeta. */
.woocommerce-checkout .checkout-order-review .wd-table-wrapper {
	margin-bottom: 24px;
	padding: 0;
	border: 1px solid var(--mci-brd);
	border-radius: 12px;
	box-shadow: none;
}

/* --- Alineacion ---------------------------------------------------------

   La seccion 7 alinea a la derecha TODOS los <td> de la tabla, que es lo
   correcto para los importes pero no para el encabezado de seccion ni para
   las opciones de entrega. */

.woocommerce-checkout .mci-section-row > td,
.woocommerce-checkout .woocommerce-shipping-totals > td,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li p {
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th {
	text-align: left;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	text-align: right;
}

/* --- Opciones de entrega ------------------------------------------------ */

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 12px;
	padding: 16px;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li input {
	flex: 0 0 auto;
	margin: 2px 0 0;
}

/* `min-width: 0` es la clave: sin el, una etiqueta larga como la de retiro en
   tienda no puede encogerse y salta a la linea de abajo del radio. */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	line-height: 1.45;
}

/* "Hasta 2 dias habiles": ocupa su propia linea, alineada bajo la etiqueta y
   no bajo el radio, y sin desbordar la tarjeta. */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li p {
	flex: 0 0 100%;
	margin: 6px 0 0 30px;
	padding: 0;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li p small {
	font-size: 12px;
	color: var(--mci-text-muted);
}

/* --- Detalles de acabado ------------------------------------------------ */

/* El nombre del producto se veia azul por heredar el color de enlace. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	color: var(--color-gray-800, #333);
	font-weight: 500;
	line-height: 1.45;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name a {
	color: inherit;
}

/* Separacion entre la tarjeta de productos y el bloque de pago. */
.woocommerce-checkout .mci-section-block {
	margin: 0 0 16px;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin-bottom: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	line-height: 1.4;
}

/* El tema pone el titulo en mayusculas ("TU PEDIDO"); en la referencia va en
   capitalizacion normal. */
.woocommerce-checkout #order_review_heading {
	text-transform: none;
}


/* -------------------------------------------------------------------------
   17. Afinado del resumen: bordes, alineacion y escala tipografica
   ------------------------------------------------------------------------- */

/* --- Doble linea bajo el Subtotal ---------------------------------------

   La seccion 7 pone `border-bottom` a TODAS las celdas de la tabla. En la zona
   de entrega eso dibujaba dos lineas seguidas: la de la fila de subtotal y la
   de la fila del encabezado de seccion. Se dejan sin borde todas las celdas de
   esa zona; la separacion visual ya la dan las tarjetas de cada opcion. */

.woocommerce-checkout .mci-section-row > th,
.woocommerce-checkout .mci-section-row > td,
.woocommerce-checkout .woocommerce-shipping-totals > th,
.woocommerce-checkout .woocommerce-shipping-totals > td {
	border: 0 !important;
}

/* --- Alineacion del encabezado de entrega -------------------------------

   Iba centrado porque heredaba la alineacion de la tabla. Se fuerza a la
   izquierda en toda la cadena para que quede identico al bloque de pago. */

.woocommerce-checkout .mci-block-head,
.woocommerce-checkout .mci-block-head__text,
.woocommerce-checkout .mci-block-head__text strong,
.woocommerce-checkout .mci-block-head__text small {
	text-align: left;
}

.woocommerce-checkout .mci-block-head__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Escala tipografica unificada ---------------------------------------

   Antes convivian tamanos distintos para lo mismo: la etiqueta de una opcion
   de entrega iba a 14px y la de pago a 15px, y los textos secundarios variaban
   entre 12 y 13px. Se fija una sola escala para todo el bloque. */

/* Titulos de seccion */
.woocommerce-checkout .mci-block-head__text strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce-checkout .mci-block-head__text small {
	font-size: 12px;
	line-height: 1.4;
}

/* Etiquetas de opcion (entrega y pago) */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label,
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}

/* Textos secundarios de opcion (plazo de entrega, descripcion del metodo) */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li p small,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p {
	font-size: 12px;
	line-height: 1.5;
}

/* Cuerpo de la tabla de productos */
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td {
	font-size: 14px;
	line-height: 1.5;
}

/* Total: el unico dato que rompe la escala, a proposito. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	font-size: 20px;
	line-height: 1.3;
}

/* Encabezado del bloque */
.woocommerce-checkout .mci-review-head__sub,
.woocommerce-checkout .mci-review-head__badge strong {
	font-size: 13px;
	line-height: 1.5;
}

.woocommerce-checkout .mci-review-head__badge small,
.woocommerce-checkout .mci-ssl-note {
	font-size: 12px;
	line-height: 1.45;
}


/* -------------------------------------------------------------------------
   18. Bordes del pie de la tabla: estado determinista

   La doble linea bajo el Subtotal sobrevivio a dos intentos de arreglo puntual,
   porque en esa zona se superponen bordes de varias fuentes: la seccion 7 de
   este archivo, `table :is(tbody,tfoot) th` del tema, y las celdas de cada
   fila del <tfoot>.

   En vez de perseguir cual gana, se hace lo simple y verificable: se borran
   TODOS los bordes del pie y se vuelve a dibujar unicamente el que separa el
   Subtotal de la zona de entrega, mas el superior del Total.

   Va con !important porque tiene que ganarle a la seccion 7 de este mismo
   archivo, que tiene igual especificidad y viene antes.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	border: 0 !important;
}

/* Unica linea de la zona: separa el Subtotal de los metodos de entrega. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
	border-bottom: 1px solid var(--mci-brd) !important;
}

/* Borde superior del Total, que delimita su franja gris. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: 1px solid var(--mci-brd) !important;
}


/* -------------------------------------------------------------------------
   19. Formulario de entrega: tarjeta y secciones numeradas

   Los encabezados los inyecta el PHP con el filtro `woocommerce_form_field`,
   anteponiendolos al primer campo de cada grupo. WooCommerce no ofrece ningun
   hook entre campos.

   LA NUMERACION LA LLEVA UN CONTADOR CSS, no el PHP. Los elementos con
   `display: none` no incrementan contadores, asi que al ocultarse la seccion
   de direccion (Retiro + Boleta) o la de Factura (con Boleta), el resto se
   renumera solo. Con numeros escritos en el HTML quedarian huecos: 1, 3, 4.
   ------------------------------------------------------------------------- */

@media (min-width: 778px) {

	.woocommerce-checkout form.checkout > .customer-details {
		padding: 28px;
		border: 1px solid var(--mci-brd);
		border-radius: 14px;
		background-color: #fff;
	}
}

/* --- Encabezado del formulario ------------------------------------------ */

.woocommerce-checkout .woocommerce-billing-fields > h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
	font-size: 24px;
	font-weight: 700;
	text-transform: none;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4.5l3.5 3.5V16H13z'/%3E%3Ccircle cx='6.5' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-checkout .mci-delivery__sub {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mci-text-muted);
}

/* --- Secciones numeradas ------------------------------------------------ */

.woocommerce-checkout form.checkout {
	counter-reset: mci-step;
}

.woocommerce-checkout .mci-form-section {
	display: flex;
	align-items: center;
	gap: 12px;
	counter-increment: mci-step;
	margin: 30px 0 16px;
	clear: both;
}

.woocommerce-checkout .mci-form-section__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background-color: var(--mci-accent-soft);
	color: var(--mci-accent);
}

.woocommerce-checkout .mci-form-section__icon .mci-icon {
	width: 20px;
	height: 20px;
}

.woocommerce-checkout .mci-form-section__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.woocommerce-checkout .mci-form-section__title {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce-checkout .mci-form-section__title::before {
	content: counter(mci-step) ". ";
}

.woocommerce-checkout .mci-form-section__text small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mci-text-muted);
}

/* Secciones condicionales. Al ocultarse dejan de contar para la numeracion. */
.woocommerce-checkout form.checkout.mci-invoice-boleta .mci-form-section--factura,
.woocommerce-checkout form.checkout.mci-hide-address .mci-form-section--address {
	display: none;
}

/* --- Tipo de documento: encabezado y opciones como una sola caja --------

   El encabezado y el campo son hermanos (el filtro antepone el <div> al <p>),
   asi que no se pueden meter en un contenedor comun sin tocar el DOM. Se
   simula la caja uniendo bordes: el encabezado cierra por abajo y el campo
   abre por arriba. */

.woocommerce-checkout .mci-form-section--document {
	margin-bottom: 0;
	padding: 18px;
	border: 1px solid var(--mci-brd);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background-color: var(--mci-bg-soft);
}

.woocommerce-checkout form.checkout .form-row.informeta {
	margin-bottom: 24px;
	border-radius: 0 0 12px 12px;
	border-top: 0;
}

.woocommerce-checkout form.checkout .form-row.informeta > label {
	/* La etiqueta larga del campo la reemplaza el subtitulo de la seccion. */
	display: none;
}

/* --- Comentarios -------------------------------------------------------- */

.woocommerce-checkout form.checkout .form-row.notes > label {
	display: none;
}

/* --- Crear cuenta ------------------------------------------------------- */

.woocommerce-checkout form.checkout .woocommerce-account-fields {
	margin: 24px 0;
}

.woocommerce-checkout form.checkout .woocommerce-account-fields .form-row {
	margin-bottom: 0;
}

/* --- Nota de privacidad al pie ------------------------------------------ */

.woocommerce-checkout .mci-form-footnote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--mci-brd);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	color: var(--mci-text-muted);
}

.woocommerce-checkout .mci-form-footnote .mci-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

/* --- Selector Envio / Retiro: mas presencia, como en la referencia ------ */

.woocommerce-checkout .mci-delivery-option {
	min-height: 60px;
	border-radius: 12px;
	font-size: 16px;
}

.woocommerce-checkout .mci-delivery-option .mci-icon {
	width: 22px;
	height: 22px;
}


/* -------------------------------------------------------------------------
   20. Disposicion de los campos: flex en vez del grid de Woodmart

   Woodmart convierte el contenedor de campos en un grid de 4 columnas:

       [class*="__field-wrapper"] {
           --wd-col: 4;
           display: grid;
           grid-template-columns: repeat(var(--wd-col), minmax(0, 1fr));
           gap: 20px;
       }
       [class*="__field-wrapper"] > * { grid-column: auto / span var(--wd-col) }
       [class*="__field-wrapper"] > :is(.form-row-first, .form-row-last) { --wd-col: 2 }

   Con ese grid, los encabezados de seccion aparecian los tres apilados arriba
   en vez de junto a su grupo de campos. El DOM estaba correcto (verificado):
   era la colocacion automatica del grid la que los reubicaba al mezclarse con
   los campos de media columna.

   Se intento convivir con el grid (anchos automaticos + `grid-column: 1 / -1`)
   y no basto. Asi que se reemplaza por **flex con wrap**, que respeta el orden
   del DOM de forma estricta: un item de ancho completo siempre corta la linea,
   y dos de media fila siempre van juntos. Sin colocacion automatica que
   reordene nada.

   Se acota a los contenedores del checkout para no alterar otros formularios
   del tema.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 20px;
}

/* Por defecto, ancho completo. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > *,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > *,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > * {
	flex: 1 1 100%;
	min-width: 0;
	margin-bottom: 0;
	width: auto;
}

/* Mitades: el `gap` de 20px se descuenta a partes iguales. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	flex: 1 1 calc(50% - 10px);
	display: block;
	margin-right: 0;
}

/* Los encabezados siempre abren linea propia. */
.woocommerce-checkout .mci-form-section {
	flex: 1 1 100%;
	margin: 16px 0 0;
}

/* La caja de "Tipo de documento" se pega a su campo, sin el gap del contenedor. */
.woocommerce-checkout .mci-form-section--document {
	margin-bottom: -18px;
}


/* -------------------------------------------------------------------------
   21. Estado seleccionado uniforme

   Las opciones del resumen (metodos de entrega y de pago) ya marcaban la
   seleccion con borde azul MAS fondo celeste. El selector Envio/Retiro y las
   pildoras Boleta/Factura solo cambiaban el borde.

   Se igualan usando las mismas variables --mci-accent-*, para que el estado
   seleccionado se lea igual en todo el checkout. Antes usaban --mci-focus,
   que resuelve al mismo azul en tiempo de ejecucion pero tiene otro color de
   respaldo si el tema deja de definir --wd-primary-color.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .mci-delivery-option[aria-pressed="true"],
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"]:checked + label.radio {
	border-color: var(--mci-accent-brd);
	box-shadow: inset 0 0 0 1px var(--mci-accent-brd);
	background-color: var(--mci-accent-soft);
	font-weight: 600;
}

/* El icono del selector acompana al estado. */
.woocommerce-checkout .mci-delivery-option[aria-pressed="true"] .mci-icon {
	color: var(--mci-accent);
}

/* El hover se queda solo con el borde, para que no se confunda con la
   seleccion. */
.woocommerce-checkout .mci-delivery-option:hover,
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper label.radio:hover {
	border-color: var(--mci-accent-brd);
}

.woocommerce-checkout .mci-delivery-option[aria-pressed="true"]:hover,
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"]:checked + label.radio:hover {
	background-color: var(--mci-accent-soft);
}

/* Foco por teclado, coherente con el resto. */
.woocommerce-checkout .mci-delivery-option:focus-visible,
.woocommerce-checkout form.checkout .form-row.informeta
	.woocommerce-input-wrapper input[type="radio"]:focus-visible + label.radio {
	outline: 2px solid var(--mci-accent);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   22. Avisos superiores: acceso de cliente y cupon, en una sola tarjeta

   En el DOM son hermanos de form.checkout, con los formularios plegados
   entremedio:

       .woocommerce-form-login-toggle      <- visible
       form.login.hidden-form              <- display:none
       .woocommerce-form-coupon-toggle     <- visible
       form.checkout_coupon                <- display:none
       .woocommerce-notices-wrapper
       form.checkout

   Como los dos formularios estan ocultos no generan caja, asi que en un
   contenedor flex los dos avisos quedan adyacentes y pueden ir lado a lado.

   Se usa FLEX y no grid: el intento anterior con grid en este mismo contenedor
   reordeno los bloques y dejo los avisos al final de la pagina. Flex con wrap
   respeta el orden del DOM de forma estricta.

   `order` manda los formularios desplegados debajo de ambos avisos; si no, al
   abrir el de acceso se colaria entre las dos mitades y partiria la tarjeta.
   ------------------------------------------------------------------------- */

/* NO convertir `.woocommerce` en flex ni en grid para poner los dos avisos
   lado a lado.

   Se intento dos veces y las dos rompio la pagina: la primera con grid, que
   reordeno los bloques y mando los avisos al final; la segunda con flex, que
   los encimo sobre el formulario. Ese contenedor mezcla avisos, dos
   formularios plegados, envoltorios de notificaciones y el formulario de
   checkout — cambiarle el modo de disposicion tiene efectos que no se pueden
   anticipar sin ver el render.

   Los dos avisos se quedan apilados a ancho completo, cada uno como su propia
   tarjeta. El marcado nuevo (icono, titulo, subtitulo y enlace) se conserva.
   ----------------------------------------------------------------------- */

/* --- El aviso en si ------------------------------------------------------ */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 14px;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--mci-brd);
	border-radius: 14px;
	background-color: #fff;
	color: inherit;
	font-size: 14px;
}

/* WooCommerce le pone un icono propio con ::before; sobra. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.woocommerce-checkout .mci-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout .mci-toggle__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--mci-accent-soft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.woocommerce-checkout .mci-toggle--login .mci-toggle__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M4.5 20c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
}

.woocommerce-checkout .mci-toggle--coupon .mci-toggle__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5V4.5h8l9.5 9.5-8 8L3 12.5z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.4'/%3E%3C/svg%3E");
}

.woocommerce-checkout .mci-toggle__text {
	min-width: 0;
}

.woocommerce-checkout .mci-toggle__text strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce-checkout .mci-toggle__text small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mci-text-muted);
}

/* El enlace, alineado a la derecha y con flecha. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info > a.showlogin,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info > a.showcoupon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mci-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info > a.showlogin::after,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info > a.showcoupon::after {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .15s ease;
}

.woocommerce-checkout .woocommerce-info > a.showlogin:hover::after,
.woocommerce-checkout .woocommerce-info > a.showcoupon:hover::after {
	transform: translateX(3px);
}

/* --- Alinear "Entrega" con "Tu pedido" ---------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin-top: 0;
	padding-top: 0;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout .checkout-order-review {
	margin-top: 0;
}


/* -------------------------------------------------------------------------
   23. Estado inicial sin parpadeo

   Las reglas condicionales de las secciones 13, 14 y 19 cuelgan de clases que
   agrega checkout.js sobre `form.checkout`. Hasta que ese JS corre, las
   secciones que deberian estar ocultas se ven — en una recarga eso es un
   parpadeo: aparece "Información adicional para Factura" y luego desaparece.

   PHP escribe ahora ese mismo estado en el <body> (filtro `body_class`), asi
   el primer pintado ya sale correcto. Aqui se duplican las reglas colgando del
   <body>, y checkout.js mantiene ambas sincronizadas.
   ------------------------------------------------------------------------- */

/* Direccion oculta en Retiro + Boleta */
body.mci-hide-address #billing_address_1_field,
body.mci-hide-address #billing_address_2_field,
body.mci-hide-address #billing_postcode_field,
body.mci-hide-address #billing_state_field,
body.mci-hide-address #billing_city_field,
body.mci-hide-address .mci-form-section--address {
	display: none;
}

/* Campos y seccion de empresa, solo con Factura */
body.mci-invoice-boleta #billing_company_field,
body.mci-invoice-boleta #billing_giro_field,
body.mci-invoice-boleta #rut_empresa_field,
body.mci-invoice-boleta .mci-form-section--factura,
body.mci-invoice-boleta #ship-to-different-address,
body.mci-invoice-boleta .woocommerce-shipping-fields {
	display: none;
}

/* Caja de retiro y titulo de despacho, segun el modo */
body.mci-mode-shipping .mci-pickup-info {
	display: none;
}

body.mci-mode-pickup .mci-pickup-info {
	display: block;
}

body.mci-mode-pickup .mci-section-heading--shipping {
	display: none;
}

body.mci-mode-shipping .mci-section-heading--shipping {
	display: block;
}


/* -------------------------------------------------------------------------
   24. El tercer hijo del formulario

   `form.checkout` no tiene dos hijos directos, sino tres:

       <div id="customer_details" class="customer-details">
       <wc-order-attribution-inputs>      <- este
       <div class="checkout-order-review">

   `<wc-order-attribution-inputs>` es el elemento de atribucion de pedido de
   WooCommerce. Llega VACIO en el HTML y JavaScript le inyecta despues los
   campos ocultos (utm_source y compania).

   Al ser hijo directo participa del layout flex: no aporta ancho, pero si
   consume un SEGUNDO `gap` de 40px. Ese era el origen real del desajuste de
   ancho respecto a los avisos de arriba — el ajuste aritmetico de la seccion 2
   lo compensaba por casualidad. Sacandolo del flujo, la cuenta cierra sola:

       (57% - 20px) + 40px de gap + (43% - 20px) = 100%

   Es seguro ocultarlo: los campos de un formulario se envian aunque su
   contenedor este oculto por CSS. Solo `disabled` o sacarlos del DOM lo
   impiden. La atribucion de pedido se sigue registrando igual.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
	display: none;
}


/* -------------------------------------------------------------------------
   25. El espacio sobre "Entrega"

   Woodmart mete 30px de margen superior al bloque de facturacion:

       .woocommerce-checkout > .customer-details .woocommerce-billing-fields {
           margin-top: 30px;
       }

   (ahi `.woocommerce-checkout` es el FORMULARIO, no el body). Eso hacia que
   "Entrega" arrancara 30px mas abajo que "Tu pedido", que no tiene ese margen.

   La regla de la seccion 22 tenia especificidad (0,2,0) y esta (0,3,0), asi
   que perdia. No hace falta !important: basta un selector mas especifico.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout > .customer-details .woocommerce-billing-fields {
	margin-top: 0;
}


/* -------------------------------------------------------------------------
   26. Linea bajo el Subtotal y aire en el Total

   1) La linea corta bajo "Subtotal" venia de dibujar el borde en las CELDAS
      de esa fila. Un borde por celda depende de como la tabla resuelva anchos
      y colapso, y ahi quedaba del ancho del <th> en vez del ancho completo.

      Se quita de las celdas y la separacion se dibuja en la fila de seccion,
      cuyo <td> tiene colspan="2" y por definicion ocupa todo el ancho. Una
      sola linea, siempre completa, sin depender del reparto de columnas.

   2) El monto del Total quedaba pegado al borde derecho. Se le da el mismo
      aire lateral que al resto de la tabla.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
	border-bottom: 0 !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot
	.mci-section-row--shipping > td {
	border-top: 1px solid var(--mci-brd) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	padding-inline: 22px !important;
}


/* -------------------------------------------------------------------------
   27. Doble asterisco en Comuna

   Comuna es el unico campo que renderiza bx-districts, con su propio filtro
   `woocommerce_form_field_city`. Ese filtro arma la etiqueta incluyendo ya el
   marcador de obligatorio de WooCommerce, y despues
   woo-checkout-field-editor-pro le agrega el suyo:

       <label>Comuna <abbr class="required" title="obligatorio">*</abbr>
              &nbsp;<span class="required" aria-hidden="true">*</span></label>

   En el HTML que llega del servidor SOLO viene el <abbr>: el <span> lo agrega
   despues `address-i18n.js` al reconstruir las etiquetas segun el pais.

   Por eso se oculta el <span> y no el <abbr>. Al reves, Comuna se quedaria sin
   ningun asterisco hasta que corriera el JS, y apareceria de golpe. Asi el
   marcador esta presente desde el primer pintado y nunca se duplica.

   Ademas el <abbr title="obligatorio"> es mas accesible que un <span
   aria-hidden="true">, y visualmente es identico porque ambos coinciden con
   `.required` en la seccion 4.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout #billing_city_field label > span.required,
.woocommerce-checkout form.checkout #shipping_city_field label > span.required {
	display: none;
}


/* -------------------------------------------------------------------------
   28. Campos de empresa: etiqueta de obligatorio con Factura

   Los tres campos de empresa se renderizan en servidor como opcionales cuando
   el documento por defecto es Boleta, asi que su etiqueta trae "(opcional)".
   Al cambiar a Factura pasan a ser obligatorios, pero esa etiqueta ya esta
   pintada y no se vuelve a renderizar: el AJAX del checkout solo reemplaza el
   resumen, no el bloque de campos.

   Por eso el cambio visual se hace aqui: se oculta "(opcional)" y se dibuja el
   asterisco. La validacion real la llevan el filtro de PHP y checkout.js.
   ------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout.mci-invoice-factura #billing_company_field label .optional,
.woocommerce-checkout form.checkout.mci-invoice-factura #billing_giro_field label .optional,
.woocommerce-checkout form.checkout.mci-invoice-factura #rut_empresa_field label .optional,
body.mci-invoice-factura #billing_company_field label .optional,
body.mci-invoice-factura #billing_giro_field label .optional,
body.mci-invoice-factura #rut_empresa_field label .optional {
	display: none;
}

.woocommerce-checkout form.checkout.mci-invoice-factura #billing_company_field label::after,
.woocommerce-checkout form.checkout.mci-invoice-factura #billing_giro_field label::after,
.woocommerce-checkout form.checkout.mci-invoice-factura #rut_empresa_field label::after,
body.mci-invoice-factura #billing_company_field label::after,
body.mci-invoice-factura #billing_giro_field label::after,
body.mci-invoice-factura #rut_empresa_field label::after {
	content: " *";
	color: var(--mci-error);
}


/* -------------------------------------------------------------------------
   29. Titulo de la seccion de direccion, segun el documento

   Con Boleta esa direccion es la de entrega; con Factura es el dato tributario.
   El PHP renderiza AMBAS versiones (ver `title_alt` en
   mci_checkout_form_sections) y aqui se decide cual se ve.

   Se hace asi y no cambiando el texto en servidor porque el encabezado se
   pinta una sola vez, con el documento por defecto, y no se vuelve a renderizar
   al cambiarlo: el AJAX del checkout solo reemplaza el resumen del pedido.
   ------------------------------------------------------------------------- */

.woocommerce-checkout .mci-doc-factura {
	display: none;
}

.woocommerce-checkout form.checkout.mci-invoice-factura .mci-doc-boleta,
body.mci-invoice-factura .mci-doc-boleta {
	display: none;
}

.woocommerce-checkout form.checkout.mci-invoice-factura .mci-doc-factura,
body.mci-invoice-factura .mci-doc-factura {
	display: inline;
}