/* ADN Soluciones — Carrito (§39)
   La página la pintaba un widget de Elementor Pro. Ahora la pinta page-cart.php
   con los overrides de woocommerce/cart/. Este archivo solo se encola en el
   carrito y el checkout. */

.adn-cart-page { padding-block: var(--space-10) var(--space-16); }

/* ── Cabecera ───────────────────────────────────────────── */
.adn-cart-page__migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--mute);
  margin-bottom: var(--space-6);
}
.adn-cart-page__migas a { color: var(--mute); text-decoration: none; }
.adn-cart-page__migas a:hover { color: var(--accent); }

.adn-cart-page__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.adn-cart-page__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  letter-spacing: -.02em;
  color: var(--ink);
}
.adn-cart-page__conteo { margin: 0; color: var(--mute); font-size: var(--text-sm); }

/* ════════════════════════════════════════════════════════
   LISTA DE PRODUCTOS
   Rejilla propia en vez de la <table class="shop_table"> de WooCommerce: su modo
   "responsive" apila celdas con pseudo-etiquetas y es justo lo que se rompía en
   móvil (miniatura a altura 0, 383 px por producto). Aquí móvil no es un caso
   especial, es la misma rejilla con menos columnas.
   ════════════════════════════════════════════════════════ */
.adn-cart__lista {
  border-top: 1px solid var(--line);
  margin-bottom: var(--space-8);
}

.adn-cart__item {
  position: relative;
  display: grid;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  /* Movil: el nombre ocupa las dos columnas de la derecha. La «x» va fuera del
     flujo (abajo) porque como columna propia estrangulaba la columna de texto y
     los nombres se partian palabra por palabra. */
  /* minmax(76px,…) reserva sitio al input de cantidad, que mide 68 px fijos, y
     minmax(0,auto) deja que ceda la columna del subtotal: con `auto` a secas se
     llevaba 154 px y estrangulaba la cantidad a 15 px, con 36 px de desborde
     recortados en silencio a 320 px. */
  grid-template-columns: 72px minmax(76px, 1fr) minmax(0, auto);
  grid-template-areas:
    "media info     info"
    "media cantidad subtotal";
}

/* Fuera del flujo en movil: reserva sitio con padding en vez de una columna. */
.adn-cart__quitar {
  position: absolute;
  top: var(--space-3);
  right: 0;
}
.adn-cart__info { padding-right: 44px; }

@media (min-width: 760px) {
  .adn-cart__item {
    grid-template-columns: 88px minmax(0, 1fr) auto auto 44px;
    grid-template-areas: "media info cantidad subtotal quitar";
    gap: var(--space-5);
  }
  /* En escritorio si hay sitio para su columna: vuelve al flujo. */
  .adn-cart__quitar { position: static; justify-self: end; }
  .adn-cart__info { padding-right: 0; }
}

/* ── Miniatura ──────────────────────────────────────────
   `height:auto` + aspect-ratio: el fallback de WooCommerce dejaba la imagen a
   altura 0 pese a tener src válida. */
.adn-cart__media {
  grid-area: media;
  align-self: start;
}
.adn-cart__media a { display: block; }
.adn-cart__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* ── Info ──────────────────────────────────────────────── */
.adn-cart__info { grid-area: info; min-width: 0; }

.adn-cart__nombre a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
}
.adn-cart__nombre a:hover { color: var(--accent); }

.adn-cart__sku {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--mute);
}

.adn-cart__unitario {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--mute);
}

/* Las etiquetas sustituyen a los <th> de la tabla. Se ocultan en escritorio,
   donde el orden de las columnas ya las hace innecesarias. */
.adn-cart__etiqueta { color: var(--mute); }
@media (min-width: 760px) {
  .adn-cart__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .adn-cart__unitario { display: none; }   /* en escritorio va el subtotal, basta */
}

/* ── Cantidad ──────────────────────────────────────────── */
.adn-cart__cantidad { grid-area: cantidad; }
.adn-cart__cantidad .quantity { display: block; }
/* 48 px de alto, igual que en la ficha de producto: la auditoría encontró 28 px
   aquí y 48 allí para el mismo control. */
.adn-cart__cantidad input.qty {
  width: 68px;
  height: 48px;
  padding: 0 var(--space-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.adn-cart__cantidad input.qty:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Subtotal ──────────────────────────────────────────── */
.adn-cart__subtotal {
  grid-area: subtotal;
  justify-self: end;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  /* A 320 px cabe en dos líneas («Subtotal» / «$17.490»); con nowrap se llevaba
     el ancho de la fila. Se recupera en una línea en cuanto hay sitio. */
  white-space: normal;
}
@media (min-width: 760px) { .adn-cart__subtotal { white-space: nowrap; } }

/* ── Quitar ────────────────────────────────────────────
   44×44 de área táctil. La auditoría móvil lo midió en 14×24, por debajo del
   mínimo de 24×24 de WCAG 2.2 — y es el control destructivo de la compra. */
.adn-cart__quitar { grid-area: quitar; }

/* Especificidad 0,3,0 y !important en el color a propósito: WooCommerce declara
   `.woocommerce a.remove` (0,2,1) con `color: var(--wc-red) !important` y además
   fija width/height 24px. Sin ganarle, la «x» salía roja y a 24x24 — justo el
   tamaño que la auditoria marco como insuficiente para el control destructivo
   de la compra. */
.adn-cart-page .adn-cart__quitar-btn.remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--mute) !important;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.adn-cart-page .adn-cart__quitar-btn.remove:hover,
.adn-cart-page .adn-cart__quitar-btn.remove:focus-visible {
  color: var(--warn) !important;
  background: color-mix(in oklab, var(--warn) 12%, transparent);
}

/* ── Acciones (cupón + actualizar) ─────────────────────── */
.adn-cart__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
}
.adn-cart__cupon {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.adn-cart__cupon input {
  height: 44px;
  min-width: 180px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.adn-cart__cupon input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ════════════════════════════════════════════════════════
   TOTALES
   ════════════════════════════════════════════════════════ */
.adn-cart__totales-wrap { max-width: 460px; margin-left: auto; }

/* WooCommerce declara `.cart-collaterals .cart_totals { float:right; width:48% }`.
   Dentro de nuestra caja de 460 px ese 48 % dejaba el bloque en 221 px y la tabla
   se salia por la derecha. Se anulan las dos. */
.adn-cart-page .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}
.adn-cart-page .cart-collaterals { width: 100%; }

.cart_totals {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cart_totals h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
}
.cart_totals table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* el bloque de envio traia nombres largos y empujaba */
}
.cart_totals th { width: 42%; }
.cart_totals td { word-break: break-word; }
/* Metodos de envio: lista vertical legible en vez de celda apretada. */
.cart_totals #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}
.cart_totals #shipping_method li { display: flex; gap: var(--space-2); align-items: flex-start; justify-content: flex-end; }
.cart_totals #shipping_method label { font-family: var(--font-body); font-size: var(--text-sm); }
.cart_totals th,
.cart_totals td {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: left;
  vertical-align: top;
}
.cart_totals th { font-weight: 500; color: var(--mute); }
/* Monoespaciada SOLO en cifras: aplicada a todo el <td>, se comia tambien los
   avisos de envio y el enlace de calcular, que son prosa. */
.cart_totals td { text-align: right; color: var(--ink); }
.cart_totals td .amount,
.cart_totals td .woocommerce-Price-amount { font-family: var(--font-mono); }
.cart_totals .woocommerce-shipping-destination,
.cart_totals .shipping-calculator-button,
.cart_totals #shipping_method label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.cart_totals .woocommerce-shipping-destination { color: var(--mute); }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
}
.cart_totals .wc-proceed-to-checkout { margin-top: var(--space-5); }
.cart_totals .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
}

/* ════════════════════════════════════════════════════════
   CARRITO VACÍO
   ════════════════════════════════════════════════════════ */
.adn-cart-vacio {
  max-width: 52ch;
  margin-inline: auto;
  padding-block: var(--space-12);
  text-align: center;
}
.adn-cart-vacio__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
}
.adn-cart-vacio__titulo {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--ink);
}
.adn-cart-vacio__lead { margin: 0 0 var(--space-6); color: var(--ink-2); }
.adn-cart-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.adn-cart-vacio__vias {
  margin: var(--space-8) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--mute);
}
.adn-cart-vacio__vias li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}

/* ── Avisos de WooCommerce ─────────────────────────────
   El default trae fondo #f6f5f8 y un borde azul #1e85be que no está en la
   paleta. Se reescriben con los tokens. */
.adn-cart-page .woocommerce-message,
.adn-cart-page .woocommerce-info,
.adn-cart-page .woocommerce-error {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
}
.adn-cart-page .woocommerce-error { border-left-color: var(--warn); }

/* El icono de WooCommerce va en position:absolute y con nuestro padding se
   montaba encima de la primera letra del mensaje. Se retira: el filete de color
   de la izquierda ya cumple esa funcion. */
.adn-cart-page .woocommerce-message::before,
.adn-cart-page .woocommerce-info::before,
.adn-cart-page .woocommerce-error::before { content: none; }

/* El boton del cupon no debe partir de linea junto a su campo. */
.adn-cart__cupon { flex-wrap: nowrap; }
@media (max-width: 520px) { .adn-cart__cupon { flex-wrap: wrap; } }
.adn-cart-page .woocommerce-message a,
.adn-cart-page .woocommerce-info a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .adn-cart__quitar-btn { transition: none !important; }
}