/* ============================================================
   Echando Raíces — checkout, elementos comunes a los 4 pasos
   Añadido 2026-10-16, tras feedback de Victoria sobre varios
   elementos sin restylar: el resumen del pedido (barra lateral),
   el bloque nativo de "confianza" (con texto de fábrica sin
   configurar — mismo bug ya detectado y resuelto en la página de
   carrito, ver custom-cart-page.css), las tarjetas de dirección
   guardada, y el título de cada paso (en mayúsculas y con color
   apagado heredado del tema nativo cuando el paso no está activo).
   Cero plantillas .tpl tocadas salvo head.tpl (mismo patrón que el
   resto de personalizaciones del checkout).
   ============================================================ */
:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-color-error: #e57468;
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}

/* ============================================================
   1) Título de cada paso ("Datos Personales", "Envío", "Método de
   envío", "Pago"). El tema nativo lo pone en mayúsculas por CSS
   (igual que en el resto del sitio, ver custom-theme.css) y lo
   atenúa a un gris apagado en los pasos ya completados o todavía
   no alcanzados — ilegible sobre el fondo oscuro. Se normaliza
   para los 4 pasos por igual, estén en el estado que estén.
   ============================================================ */
body#checkout .checkout-step .step-title {
  text-transform: none !important;
  color: var(--hr-color-texto-claro) !important;
  opacity: 1 !important;
}
body#checkout .checkout-step .step-title .step-edit {
  color: rgba(230, 218, 204, 0.55) !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: none !important;
}
body#checkout .checkout-step .step-title .done {
  color: var(--hr-color-acento-claro) !important;
}
/* Victoria (2026-10-18, 2ª vuelta): el título ya tenía 20px de
   padding-bottom (nativo, entre el texto y la línea separadora), pero
   la línea tocaba directamente el borde superior de la tarjeta de
   abajo (".content") — 0px de hueco entre la línea y la tarjeta.
   Se añade el espacio ahí, en vez de tocar el padding nativo del
   título, para no desajustar la distancia texto↔línea que ya estaba
   bien. Mismo valor en los 4 pasos (selector por ".checkout-step",
   no por cada ID suelto, para que quede igual en los cuatro sin
   repetir la regla). */
body#checkout .checkout-step .content {
  margin-top: 20px;
}

/* ============================================================
   2) Resumen del pedido (barra lateral, "js-checkout-summary"):
   mismo tratamiento ya validado en la página de carrito
   (custom-cart-page.css, ".cart-summary.card").
   ============================================================ */
body#checkout #js-checkout-summary.card {
  background: rgba(230, 218, 204, 0.03) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  box-shadow: none !important;
  padding: 24px;
  color: var(--hr-color-texto-claro);
}
body#checkout #js-checkout-summary .card-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#checkout #js-checkout-summary .cart-summary-products,
body#checkout #js-checkout-summary .cart-summary-subtotals {
  color: rgba(230, 218, 204, 0.85);
}
body#checkout #js-checkout-summary .js-show-details {
  color: var(--hr-color-acento-claro) !important;
}
body#checkout #js-checkout-summary .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: rgba(230, 218, 204, 0.75);
  padding: 8px 0;
  margin: 0 !important;
}
body#checkout #js-checkout-summary .cart-summary-line .label,
body#checkout #js-checkout-summary .cart-summary-line .value {
  color: inherit;
}
body#checkout #js-checkout-summary .cart-summary-line .value {
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
}
body#checkout #js-checkout-summary .card-block.cart-summary-totals {
  border-top: 1px solid var(--hr-color-borde-oscuro);
  margin-top: 8px;
  padding-top: 20px !important;
  padding-bottom: 0 !important;
}
body#checkout #js-checkout-summary .cart-summary-line.cart-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--hr-color-texto-claro) !important;
  padding: 0 !important;
  border-top: none !important;
}
body#checkout #js-checkout-summary .cart-summary-line.cart-total .label,
body#checkout #js-checkout-summary .cart-summary-line.cart-total .value {
  color: var(--hr-color-texto-claro) !important;
}
body#checkout #js-checkout-summary .media-list .media-body,
body#checkout #js-checkout-summary .product-name a {
  color: var(--hr-color-texto-claro) !important;
}
body#checkout #js-checkout-summary .product-quantity,
body#checkout #js-checkout-summary .product-price {
  color: rgba(230, 218, 204, 0.7) !important;
}

/* ============================================================
   3) Bloque nativo "blockreassurance" (política de seguridad/
   entrega/devolución): mismo bug ya detectado en la página de
   carrito — el módulo no está configurado y muestra el texto de
   fábrica "(editar con el módulo de información de seguridad...)"
   con un color de texto en negro fijo (estilo inline que pone el
   propio módulo, por eso no se podía arreglar solo con CSS de
   color). Se oculta aquí igual que en el carrito, y
   custom-checkout-shell.js inyecta el mismo bloque de confianza
   real ya aprobado por Victoria.
   ============================================================ */
body#checkout .blockreassurance_product {
  display: none !important;
}
body#checkout #js-checkout-summary .hr-trust-list {
  margin-top: 22px;
  /* Victoria (2026-10-18): 36px de espacio entre la línea separadora
     (el border-top de aquí abajo) y el bloque de confianza que la
     sigue — antes 18px. */
  padding-top: 36px;
  border-top: 1px solid var(--hr-color-borde-oscuro);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#checkout #js-checkout-summary .hr-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(230, 218, 204, 0.65);
}
body#checkout #js-checkout-summary .hr-trust-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--hr-color-acento-claro);
}
body#checkout #js-checkout-summary .hr-trust-footnote {
  font-size: 12px;
  color: rgba(230, 218, 204, 0.65);
  line-height: 1.4;
  margin: 10px 0 0;
}

/* ============================================================
   4) Direcciones guardadas ("Mi Dirección" y similares) — selector
   de tarjetas que PrestaShop muestra en vez del formulario en
   blanco cuando el cliente ya tiene direcciones guardadas. Alcance
   conocido, nunca se había restylado (ver claude/17_propuesta_
   checkout_envio.md, "Alcance no cubierto"). Markup nativo:
   article.address-item > header.h4 > label.radio-block (core,
   checkout/_partials/address-selector-block.tpl, sin tocar).
   ============================================================ */
body#checkout .address-item {
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-card) !important;
  background: rgba(230, 218, 204, 0.03) !important;
  padding: 16px !important;
  margin-bottom: 12px;
  color: var(--hr-color-texto-claro) !important;
  transition: border-color .15s ease, background .15s ease;
}
body#checkout .address-item.selected {
  border-color: var(--hr-color-acento-claro) !important;
  background: rgba(199, 156, 226, 0.08) !important;
}
body#checkout .address-item .radio-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}
body#checkout .address-item input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--hr-color-acento-claro);
  flex-shrink: 0;
}
body#checkout .address-item .address-alias {
  color: var(--hr-color-texto-claro) !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: none !important;
  display: block;
}
/* Victoria (2026-10-16, ronda 3): la dirección se veía en la misma
   fila que el radio y el título "Mi Dirección" — con flex-wrap en
   .radio-block (arriba) y flex-basis:100% aquí, pasa a su propia
   línea a todo el ancho de la tarjeta, debajo de radio + título,
   igual que pedía (opción "a todo el ancho" y opción "debajo" a la
   vez, son compatibles). */
body#checkout .address-item .address {
  flex-basis: 100%;
  color: rgba(230, 218, 204, 0.7) !important;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}
body#checkout .address-item hr {
  border-color: var(--hr-color-borde-oscuro) !important;
  margin: 12px 0;
}
body#checkout .address-item .address-footer {
  display: flex;
  gap: 16px;
}
body#checkout .address-item .address-footer a {
  color: rgba(230, 218, 204, 0.55) !important;
  font-size: 12.5px;
}
body#checkout .address-item .address-footer a:hover {
  color: var(--hr-color-acento-claro) !important;
}

/* "Añadir nueva dirección" (debajo de la tarjeta de dirección
   guardada): sin estilo propio, heredaba un color oscuro casi
   invisible sobre el fondo oscuro del checkout. Detectado durante
   la verificación de este mismo arreglo (2026-10-16), no reportado
   por Victoria pero mismo bug de contraste. */
body#checkout .add-address a {
  color: var(--hr-color-acento-claro) !important;
  font-size: 13.5px;
  font-weight: 500;
}
body#checkout .add-address a:hover {
  color: var(--hr-color-texto-claro) !important;
}

/* ============================================================
   5) Pasos 3 "Método de envío" y 4 "Pago": el tema nativo les deja
   un fondo blanco en la propia sección (no solo en ".content"),
   algo que los pasos 1 y 2 ya tenían corregido cada uno en su
   propio archivo (custom-checkout-personal.css / custom-
   checkout-envio.css) pero que nunca se replicó aquí. Detectado
   durante la verificación de este mismo arreglo (2026-10-16), no
   reportado por Victoria — mismo criterio de card oscura que el
   resto del checkout.
   ============================================================ */
body#checkout .checkout-step {
  background: transparent !important;
}
body#checkout #checkout-delivery-step .content,
body#checkout #checkout-payment-step .content {
  background: rgba(230, 218, 204, 0.03) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-card) !important;
  box-shadow: none !important;
  padding: 28px;
  color: var(--hr-color-texto-claro);
}

/* Paso 4 "Pago" — lista nativa de métodos de pago y checkbox de
   términos: el tema trae un color de texto oscuro fijo (pensado
   para fondo blanco) que es casi invisible sobre la card oscura de
   arriba. Mismo hallazgo que el punto 5, durante la verificación
   (2026-10-16), no reportado por Victoria. */
body#checkout .payment-options .payment-option label,
body#checkout .payment-options .payment-option label span {
  color: var(--hr-color-texto-claro) !important;
}
body#checkout .additional-information,
body#checkout .additional-information p,
body#checkout .additional-information dl,
body#checkout .additional-information dt,
body#checkout .additional-information dd {
  color: rgba(230, 218, 204, 0.75) !important;
}
body#checkout #conditions-to-approve .condition-label label {
  color: rgba(230, 218, 204, 0.75) !important;
}
body#checkout #conditions-to-approve .condition-label a {
  color: var(--hr-color-acento-claro) !important;
}

/* ============================================================
   RONDA 2 (2026-10-16, noche) — segunda tanda de feedback de
   Victoria tras ver la primera ronda ya en vivo: varios textos y
   controles nativos seguían con los colores de fábrica de
   PrestaShop (el cyan #24b9d7 de origen, o el gris/negro #232323
   de texto por defecto, pensados para un tema claro) en vez del
   violeta/crema de marca. Casi todos comparten la misma causa raíz:
   son elementos nativos que ningún archivo custom-checkout-*.css
   había tocado todavía porque no aparecen en el recorrido normal
   de invitado (el bloque de "ya tienes sesión iniciada", el
   formulario de dirección de facturación separada, etc.).
   ============================================================ */

/* 6) Base: cualquier texto o enlace nativo no tocado todavía hereda
   crema/violeta en vez del negro/cyan de fábrica. No es un parche
   puntual — es la causa de la mayoría de los puntos de hoy ("Cerrar
   sesión", "Su dirección de facturación", el checkbox de términos,
   el pie de página...), así que se corrige en la base para que
   cualquier texto nativo que aparezca en el futuro ya nazca legible. */
body#checkout {
  color: var(--hr-color-texto-claro);
}
body#checkout a:not(.btn) {
  color: var(--hr-color-acento-claro);
}
body#checkout a:not(.btn):hover {
  color: var(--hr-color-texto-claro);
}

/* 7) Botones ".btn.btn-primary" nativos (el "Continuar" del bloque
   "Conectado como...", el del paso 3 nativo si llega a verse, y
   "Realizar pedido" del paso 4): mismo par violeta claro + texto
   oscuro ya usado en el "Continuar" del paso 2, que es el único que
   se había corregido hasta ahora (ver custom-checkout-envio.css). */
body#checkout .btn.btn-primary {
  background-color: var(--hr-color-acento-claro) !important;
  border-color: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-fondo-oscuro) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body#checkout .btn.btn-primary:hover {
  background-color: var(--hr-color-texto-claro) !important;
  border-color: var(--hr-color-texto-claro) !important;
}
body#checkout .btn.btn-primary.disabled,
body#checkout .btn.btn-primary:disabled {
  background-color: rgba(230, 218, 204, 0.15) !important;
  border-color: var(--hr-color-borde-oscuro) !important;
  color: rgba(230, 218, 204, 0.4) !important;
  opacity: 1 !important;
}

/* 8) Radio buttons nativos ("custom-radio": dirección guardada,
   método de pago, y también "Tratamiento" del paso 1). Victoria
   (2026-10-16, ronda 3): no basta con cambiar el color del <span>
   decorativo que PrestaShop pinta encima del <input> real (oculto
   con opacity:0) — pidió el mismo COMPONENTE que los radio de
   "Envío a domicilio"/"Recogida en tienda" (.hr-method-option,
   custom-checkout-envio.css): un <input type="radio"> nativo
   VISIBLE con accent-color, sin ningún span encima. Se revela el
   input real y se oculta el span; el color lo pone accent-color,
   igual que en .hr-method-option — ya no es "cambiar el color de
   la decoración", es el mismo control. */
body#checkout .custom-radio input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  accent-color: var(--hr-color-acento-claro);
  appearance: auto;
}
body#checkout .custom-radio span {
  display: none !important;
}
/* Victoria (2026-10-18, 2ª vuelta): "detrás del radio hay un span que
   también actúa de radio y se solapan" — tenía razón, pero no era el
   <span> decorativo interior (ese ya se oculta arriba). Es el propio
   ENVOLTORIO <span class="custom-radio"> el que trae de fábrica
   (theme.css) su propio círculo falso: fondo blanco, borde gris,
   18×18, redondeado — pensado para verse DETRÁS del span interior
   cuando el input real estaba oculto (opacity:0). Al revelar el input
   real (20×20, con accent-color) ese círculo de fábrica se queda
   visible justo debajo, ligeramente descuadrado por la diferencia de
   tamaño — el efecto de "dos radios superpuestos". Se neutraliza el
   envoltorio para que sea un simple contenedor transparente: el único
   círculo visible pasa a ser el input nativo. Afecta a los 3 sitios
   que comparten este componente (Tratamiento, dirección guardada,
   método de pago). */
body#checkout .custom-radio {
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
}
body#checkout .custom-checkbox span {
  border-color: var(--hr-color-borde-oscuro) !important;
}
body#checkout .custom-checkbox input:checked + span {
  border-color: var(--hr-color-acento-claro) !important;
}
body#checkout .custom-checkbox input:checked + span i.checkbox-checked {
  color: var(--hr-color-acento-claro) !important;
}

/* 9) Número de paso activo: el círculo verde nativo pasa al mismo
   par violeta claro + texto oscuro de los botones (punto 7), para
   no meter un segundo acento de color (verde) en el checkout. */
body#checkout .step-number {
  background-color: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-fondo-oscuro) !important;
}

/* 10) Etiqueta "Opcional" junto a los campos no obligatorios (Alias,
   Empresa, Número de IVA, Notas para el repartidor): se quita del
   todo, a petición de Victoria — el asterisco en los obligatorios
   ya basta para distinguirlos. */
body#checkout .form-control-comment {
  display: none !important;
}

/* 11) Selector de prefijo de teléfono ("+34 España"): es un <select>
   nativo sin estilo propio (fondo blanco, texto negro) — choca con
   el input de al lado, que sí está en el tema oscuro desde el
   principio. Mismo radio/borde que el input para que se vean como
   un único control. */
body#checkout .hr-phone-country {
  background-color: rgba(230, 218, 204, 0.05) !important;
  color: var(--hr-color-texto-claro) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
}
body#checkout .hr-phone-country:focus {
  border-color: var(--hr-color-acento-claro) !important;
  outline: none;
}

/* 12) Cabeceras nativas tipo "h2.h4" dentro del formulario de
   dirección ("Dirección de envío", "Su dirección de facturación"):
   mismo negro de fábrica que el resto de textos nativos de hoy. */
body#checkout .js-address-form h2.h4 {
  color: var(--hr-color-texto-claro) !important;
  font-size: 16px;
}

/* Enlace "Cancelar" (al añadir una dirección de facturación
   distinta): ya hereda el violeta de la regla base del punto 6, solo
   se ajusta el peso para que no compita visualmente con "Continuar". */
body#checkout .cancel-address {
  font-weight: 500;
}

/* 13) Pie de página del checkout ("Términos y condiciones" +
   copyright): es la única franja del checkout que se quedaba en
   blanco — el resto de .tpl del tema ya está oscurecido, pero este
   footer.tpl específico del checkout (distinto del footer general
   del sitio) nunca se había tocado. */
body#checkout footer.js-footer {
  background-color: var(--hr-color-fondo-oscuro) !important;
  border-top: 1px solid var(--hr-color-borde-oscuro);
}
body#checkout footer.js-footer .text-sm-center {
  color: rgba(230, 218, 204, 0.6);
  font-size: 13px;
}

/* ============================================================
   14) Pasos "Envío" (2) y "Método de envío" (3) — fusión visual.
   Victoria preguntó por qué hay dos pasos si el segundo se
   autocompleta solo (ver custom-checkout-envio.js, punto 7,
   "autoselección invisible"). Cuando ese autorelleno funciona (caso
   normal, sessionStorage disponible) el paso 3 nunca llega a
   mostrarse — pero su título SÍ seguía apareciendo en el listado de
   pasos, antes y después de pasarlo, aunque fuera solo una línea
   colapsada. Se oculta aquí en los dos estados en los que nunca hay
   nada que el cliente necesite ver u hacer (".-unreachable": todavía
   no se ha llegado; ".-complete": ya se completó, solo o a mano).

   OJO: a propósito NO se oculta en el estado ".-current" — ese es
   justo el caso excepcional en el que el autorelleno ha fallado
   (sessionStorage bloqueado, etc.) y el propio script deja el paso
   3 visible a posta como red de seguridad para que el cliente no se
   quede bloqueado sin poder elegir transportista. Ocultarlo siempre
   rompería esa red de seguridad. El renumerado del paso "Pago" de
   4 a 3 (para que no quede un hueco) se hace en JS, ver
   custom-checkout-shell.js — y solo cuando el paso 3 está
   efectivamente oculto, para no numerar dos pasos visibles como "3"
   a la vez en ese caso excepcional.
   ============================================================ */
body#checkout #checkout-delivery-step.-unreachable,
body#checkout #checkout-delivery-step.-complete {
  display: none !important;
}

/* ============================================================
   RONDA 3 (2026-10-16) — tercera tanda de feedback de Victoria,
   a partir de una captura del modal de transferencia bancaria.
   ============================================================ */

/* 15) Modal "Más información" de transferencia bancaria
   (#bankwire-modal): Bootstrap nativo con fondo blanco. El texto ya
   salía en crema claro (hereda el color base del punto 6, que se
   aplica a todo body#checkout) — el problema real era solo que
   nadie había tocado el fondo blanco de ".modal-content", de ahí el
   "texto muy claro sobre fondo blanco" que reportó Victoria. Se le
   da el mismo fondo/borde oscuro que el resto de tarjetas del
   checkout; el botón de cerrar (×) tenía su propio negro de fábrica
   (Bootstrap ".close") y se corrige aparte porque no hereda el
   color base al ser un <button>, no un enlace. */
body#checkout #bankwire-modal .modal-content {
  background: var(--hr-color-fondo-oscuro) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-card) !important;
  color: var(--hr-color-texto-claro) !important;
}
body#checkout #bankwire-modal .modal-header {
  border-bottom: 1px solid var(--hr-color-borde-oscuro) !important;
}
body#checkout #bankwire-modal .modal-header h2 {
  color: var(--hr-color-texto-claro) !important;
  font-size: 18px;
  margin: 0;
}
body#checkout #bankwire-modal .close {
  color: var(--hr-color-texto-claro) !important;
  text-shadow: none !important;
  opacity: 0.6;
}
body#checkout #bankwire-modal .close:hover {
  opacity: 1;
}
body#checkout #bankwire-modal .modal-body dt,
body#checkout #bankwire-modal .modal-body dd {
  /* ".definition-list dt/dd" del tema nativo trae su propio fondo
     casi blanco (rgb(246,246,246)) independiente del de
     ".modal-content" — sin esto, las filas del IBAN/importe/etc.
     se quedaban como recuadros claros sueltos sobre la card oscura. */
  background: rgba(230, 218, 204, 0.05) !important;
}
body#checkout #bankwire-modal .modal-body dt {
  color: rgba(230, 218, 204, 0.55) !important;
  font-weight: 600;
  font-size: 12px;
  margin-top: 10px;
}
body#checkout #bankwire-modal .modal-body dd {
  color: var(--hr-color-texto-claro) !important;
  font-size: 14px;
  margin-bottom: 2px;
}

/* 16) Número de cuenta inyectado en el texto visible del método de
   pago (custom-checkout-shell.js, injectBankwireAccountNumber) —
   mismo tratamiento que el resto de ".additional-information p". */
body#checkout .hr-bankwire-account {
  margin-top: 8px !important;
}
body#checkout .hr-bankwire-account strong {
  color: var(--hr-color-texto-claro) !important;
}

/* 17) Contraste: "La dirección seleccionada se utilizará tanto como
   de dirección personal (para la factura) como de dirección de
   entrega." salía en rgb(122,122,122) — ~4:1 sobre el fondo oscuro
   de la tarjeta (#221200 con el overlay de la card), por debajo del
   4.5:1 que exige WCAG AA para texto de este tamaño (13-15px, no es
   "texto grande"). Se sube a la misma crema atenuada que ya se usa
   para texto secundario en el resto del checkout (~6.7:1, pasa AA
   con margen). Clase añadida por JS (fixAddressNoteContrast, mismo
   criterio que rewriteBillingAddressCopy: es texto nativo sin clase
   propia, se localiza por contenido). */
body#checkout .hr-address-note {
  color: rgba(230, 218, 204, 0.7) !important;
}

/* ============================================================
   RONDA 4 (2026-10-18) — feedback sobre el paso "Datos personales".
   ============================================================ */

/* 18) Autocompletado del navegador: cuando Chrome/Edge rellenan un
   campo con una credencial guardada (email, contraseña...), pintan
   un fondo claro de fábrica que NINGÚN color nuestro puede pisar
   por CSS normal — es un estilo interno del navegador aplicado al
   estado ":-webkit-autofill", no algo que dependa de nuestras
   reglas. Victoria lo vio en el email del paso 1 y en email/
   contraseña del login porque el navegador ya tenía sus datos
   guardados (por eso en una sesión sin autocompletar no se
   reproduce). El único truco fiable es forzar un box-shadow interior
   enorme del color que sí queremos, que tapa el fondo nativo. */
body#checkout input:-webkit-autofill,
body#checkout input:-webkit-autofill:hover,
body#checkout input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hr-color-texto-claro) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  caret-color: var(--hr-color-texto-claro);
  transition: background-color 9999s ease-in-out 0s;
}