/* ══════════════════════════════════════════════════════════════════════
   MEGA MAYORISTA — mm-cantidad.css
   Selector de cantidad + compra + tramo de volumen, dentro de la tarjeta.
   ══════════════════════════════════════════════════════════════════════
   El markup lo genera js/ui/cantidad-tarjeta.js, que reemplaza el
   contenido de .mm-card-action (y NADA mas de la tarjeta).

   Todo lo que se ve aca sale del backend: precioUnidad, precioMayorista,
   tarId y las unidades del tramo (tierQtyParaPrecio). El porcentaje nunca
   aparece solo: viaja pegado a la condicion de unidades que lo habilita,
   igual que en el detalle del producto.

   Los botones − y + son la version con mouse de lo que el input ya expone
   como role="spinbutton": por eso quedan fuera del orden de tabulacion.
   Con cientos de tarjetas en la grilla, dos paradas extra por tarjeta
   volverian el teclado impracticable.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Contenedor ────────────────────────────────────────────────────────
   Movil primero: control y boton a lo ancho, con el area tactil de 44.
   El bloque sigue anclado abajo por el `margin-top: auto` que .mm-card-action
   ya trae, asi que los botones COMPRAR de una misma fila siguen alineados
   aunque unas tarjetas tengan linea de tramo y otras no.               */
.mm-card-action.mmq-host {
  --mmq-h: var(--mm-ctl-h-touch);
  --mmq-btn-w: var(--mm-tap, 44px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Linea del tramo de volumen ────────────────────────────────────── */
.mmq-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  margin: 0;
  color: var(--mm-warn-text);
  font-size: var(--mm-t-eyebrow);
  line-height: 1.35;
}

.mmq-tier[hidden] { display: none; }

.mmq-tier.is-ok { color: var(--mm-ok-text); }

.mmq-tier-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.mmq-tier-ico svg {
  width: 12px;
  height: 12px;
}

/* Con el descuento ya aplicado el texto arranca con un ✓: el icono de
   etiqueta sobra y roba ancho al precio. */
.mmq-tier.is-ok .mmq-tier-ico { display: none; }

.mmq-tier-txt {
  font-weight: var(--mm-w-semi);
  overflow-wrap: anywhere;
}

/* Precio de unidad tachado. Solo existe cuando el descuento YA aplica, es
   decir cuando los dos numeros son reales al mismo tiempo. */
.mmq-tier-antes {
  color: var(--mm-text-faint);
  font-weight: var(--mm-w-regular);
}

.mmq-tier-antes[hidden],
.mmq-tier-badge[hidden] { display: none; }

.mmq-tier-badge {
  padding: 0 5px;
  border: 1px solid var(--mm-ok-border);
  border-radius: var(--mm-r-xs);
  background: var(--mm-ok-bg);
  color: var(--mm-ok-text);
  font-weight: var(--mm-w-black);
  line-height: 1.5;
}

/* ── Fila: cantidad + compra ───────────────────────────────────────────
   `wrap` es la red de seguridad: si la tarjeta se angosta mas de lo
   previsto, el boton baja a la segunda linea en vez de aplastarse.    */
.mmq-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-s-2);
}

/* ── Selector de cantidad ──────────────────────────────────────────── */
.mmq-step {
  display: grid;
  grid-template-columns: var(--mmq-btn-w) minmax(0, 1fr) var(--mmq-btn-w);
  align-items: center;
  flex: 1 1 100%;
  height: var(--mmq-h, var(--mm-ctl-h-touch));
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  overflow: hidden;
  transition: var(--mm-tr-color);
}

/* El anillo va en la caja entera, no solo en el input: el grupo se lee
   como un control unico. */
.mmq-step:focus-within {
  border-color: var(--mm-focus-color);
  box-shadow: 0 0 0 var(--mm-focus-width) var(--mm-red-tint);
}

.mmq-btn {
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-bold);
  line-height: 1;
  cursor: pointer;
  transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease);
}

@media (hover: hover) and (pointer: fine) {
  .mmq-btn:hover { background: var(--mm-band); color: var(--mm-ink); }
}

.mmq-btn:active { transform: scale(var(--mm-press, 0.97)); }

.mmq-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  border: none;
  border-inline: 1px solid var(--mm-line-soft);
  background: transparent;
  color: var(--mm-ink);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-black);
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Ya en el pedido: el numero se pinta con el rojo de la marca, que es la
   senal que el sitio usa para "esto ya es tuyo". */
.mm-card.mmq-en-carrito .mmq-input { color: var(--mm-red-accent); }

.mmq-input:focus-visible {
  outline: var(--mm-focus-ring);
  outline-offset: -2px;
}

/* ── Boton de compra ───────────────────────────────────────────────────
   Especificidad de 3 clases para ganarle a `.mm-card-action .mm-btn`
   (mm-card.css), que lo estira al 100% y lo dejaria sin sitio al lado
   del selector. Asi no depende del orden en que carguen las hojas.   */
.mm-card .mm-card-action .mmq-buy {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
  height: var(--mmq-h, var(--mm-ctl-h-touch));
}

.mm-card .mm-card-action .mmq-buy:focus-visible {
  outline: var(--mm-focus-ring);
  outline-offset: var(--mm-focus-offset);
}

/* Acuse de recibo de "se agrego": el boton se pone verde y cambia de
   texto durante ~1,7 s. Es lo que evita tener que ir a mirar el carrito
   para saber si el click entro. */
.mm-card .mm-card-action .mmq-buy.is-ok {
  background: var(--mm-ok);
  border-color: var(--mm-ok);
  color: var(--mm-on-red);
}

@media (hover: hover) and (pointer: fine) {
  .mm-card .mm-card-action .mmq-buy.is-ok:hover {
    background: var(--mm-ok);
    border-color: var(--mm-ok);
    color: var(--mm-on-red);
  }
}

/* ── Puntero fino (mouse) ──────────────────────────────────────────────
   Con mouse no hacen falta 44 px: el selector se compacta y entra en la
   misma linea que el boton, que es como se lee mejor la tarjeta. En
   tactil se queda la version de arriba, a lo ancho y con el area grande. */
@media (hover: hover) and (pointer: fine) {
  .mm-card-action.mmq-host {
    --mmq-h: var(--mm-ctl-h);
    --mmq-btn-w: 32px;
  }

  .mmq-step { flex: 0 1 104px; }

  .mm-card .mm-card-action .mmq-buy {
    flex: 1 1 84px;
    padding-inline: var(--mm-s-2);
  }
}

/* ── Movil ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .mm-card-action.mmq-host { gap: 5px; }
  .mmq-tier-ico svg { width: 11px; height: 11px; }
}

/* ── Aviso para lectores de pantalla ───────────────────────────────────
   UNA sola region viva para todo el sitio (la crea el JS y la reutiliza).
   Lleva el mensaje del tramo y las altas/bajas del pedido; el numero en
   si lo canta el propio input como spinbutton.                        */
.mmq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Movimiento reducido ───────────────────────────────────────────────
   Las duraciones ya van a 0 desde tokens.css; aca se anula la unica
   escala propia. El cambio de color se conserva: no es movimiento y es
   la senal de que el control respondio.                               */
@media (prefers-reduced-motion: reduce) {
  .mmq-btn:active { transform: none; }
}