/* =============================================================================
   VistaMayorista v1.5.0
   CSS organizado por secciones:
   1. Reset y elementos ocultos
   2. Layout base (grid)
   3. Tipografía y textos
   4. Input de cantidad (stepper)
   5. Semáforo de stock
   6. Precio, total, acciones
   7. Botones y feedback AJAX
   8. Responsive: mobile / tablet / desktop
   ============================================================================= */

/* 1. Reset y elementos ocultos =============================================== */
.product-miniature.product-miniature-list .product-availability,
.product-miniature.product-miniature-list .available,
.product-miniature.product-miniature-list .in-stock,
.product-miniature.product-miniature-list .out-of-stock { display:none !important; }

.product-miniature.product-miniature-list .functional-buttons,
.product-miniature.product-miniature-list .quick-view,
.product-miniature.product-miniature-list .add-to-compare { display:none !important; }

/* 2. Layout base (grid) ====================================================== */
.product-miniature-list-row{
  display: grid !important;
  grid-template-columns: 84px 1fr 360px !important;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.product-miniature.product-miniature-list .cont-img-wuala{
  position: relative;
  min-width: 64px;
}
.product-miniature.product-miniature-list .cont-img-wuala img{
  width: auto; max-width: 80px; height: auto; display: block;
}

.product-miniature.product-miniature-list .col-description{
  padding: .5rem 1rem; min-width: 0;
}

.product-miniature.product-miniature-list .col-buy{
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
}

/* 3. Tipografía y textos ===================================================== */
.product-miniature.product-miniature-list .product-title{
  margin: 0 0 .2rem;
}
.product-miniature.product-miniature-list .product-title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(13px, 1.55vw, 17px);
  line-height: 1.2;
  color: #0f172a;
  text-decoration: none;
}
.product-miniature.product-miniature-list .product-short{
  color: #374151; font-size: .9rem; margin-top: .25rem;
}
.product-miniature.product-miniature-list .product-reference,
.product-miniature.product-miniature-list .product-brand{
  color: #6b7280; font-size: .85rem;
}
.product-miniature.product-miniature-list .vm-ref-label,
.product-miniature.product-miniature-list .vm-brand-label{
  color: #9ca3af; font-weight: 500;
}
.product-miniature.product-miniature-list .vm-ref-value{
  color: #374151; font-weight: 600;
}

/* Stock inline (punto + texto al lado del nombre, estilo prototipo) */
/* Stock inline (dot + label al lado del nombre). Oculto por default — se muestra
   solo cuando el modo de semáforo es 2 (círculo + leyenda). En el modo default (0)
   el indicador visual es el badge sobre la imagen, no el dot inline. */
.product-miniature.product-miniature-list .vm-stock-inline{
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: .25rem;
  font-size: .85rem;
}
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot{
  width: 10px; height: 10px; border-radius: 999px; display: inline-block;
  flex-shrink: 0;
}
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--ok{ background: #22c55e; }
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--low{ background: #f59e0b; }
.product-miniature.product-miniature-list .vm-stock-inline .vm-dot.vm-dot--out{ background: #ef4444; }
.product-miniature.product-miniature-list .vm-stock-label{
  font-weight: 500;
}
.product-miniature.product-miniature-list .vm-stock-label--ok{ color: #059669; }
.product-miniature.product-miniature-list .vm-stock-label--low{ color: #d97706; }
.product-miniature.product-miniature-list .vm-stock-label--out{ color: #dc2626; }

.product-miniature.product-miniature-list .vm-stock-badge-row{
  margin-bottom: .4rem;
  line-height: 1;
}
.product-miniature.product-miniature-list .vm-stock-badge-row .vm-badge{
  position: static;
  z-index: auto;
  box-shadow: none;
}

/* 4. Input de cantidad (stepper nativo) ==================================== */

/* Ocultar flechas nativas del input number */
.product-miniature.product-miniature-list .vm-input-qty::-webkit-outer-spin-button,
.product-miniature.product-miniature-list .vm-input-qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.product-miniature.product-miniature-list .vm-input-qty { -moz-appearance: textfield; }

/* ===== Stepper nativo del módulo (v1.5.3) =====
   Construido 100% por nuestro JS, sin TouchSpin ni dependencias.
   Estructura: <div.vm-stepper> [ <input.vm-input-qty> <div.vm-stepper-arrows> [▲ / ▼] ] </div>
   Look "Warehouse default": input con borde fino gris, flechas apiladas a la derecha. */

.product-miniature.product-miniature-list .vm-stepper{
  display: inline-flex !important;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
  height: 34px;
  width: auto;
  box-shadow: none;
  vertical-align: middle;
}

.product-miniature.product-miniature-list .vm-stepper .vm-input-qty{
  width: 44px !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #212529 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 0 4px !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-miniature.product-miniature-list .vm-stepper:focus-within{
  border-color: #a0a0a0;
  box-shadow: 0 0 0 2px rgba(160,160,160,0.12);
}

/* Contenedor vertical de las flechitas, a la derecha del input */
.product-miniature.product-miniature-list .vm-stepper-arrows{
  display: inline-flex;
  flex-direction: column;
  border-left: 1px solid #ced4da;
  background: #ffffff;
}

/* Cada botón (flecha arriba / abajo) */
.product-miniature.product-miniature-list .vm-stepper-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px;
  flex: 1 1 auto;
  border: 0;
  background: #ffffff;
  color: #495057;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  line-height: 1;
  outline: none;
}

.product-miniature.product-miniature-list .vm-stepper-btn + .vm-stepper-btn{
  border-top: 1px solid #e9ecef;
}

.product-miniature.product-miniature-list .vm-stepper-btn:hover{
  background: #f8f9fa;
  color: #212529;
}

.product-miniature.product-miniature-list .vm-stepper-btn:active{
  background: #e9ecef;
}

.product-miniature.product-miniature-list .vm-stepper-btn svg{
  width: 10px;
  height: 6px;
  display: block;
}

/* Mobile compacto */
@media (max-width: 576px){
  .product-miniature.product-miniature-list .vm-stepper{
    height: 32px;
  }
  .product-miniature.product-miniature-list .vm-stepper .vm-input-qty{
    width: 38px !important;
    font-size: 13px !important;
  }
  .product-miniature.product-miniature-list .vm-stepper-btn{
    width: 20px;
  }
}

/* 5. Semáforo de stock (badges) ============================================ */
.product-miniature.product-miniature-list .cont-img-wuala{
  position: relative; /* necesario para posicionar el badge con position:absolute */
}

/* v1.5.6: estilos base del badge — aplican SIEMPRE, esté donde esté el badge.
   Así si por algún motivo el stub no está actualizado y el badge queda fuera de
   .cont-img-wuala, al menos se ve como una pill chiquita bien estilizada. */
.product-miniature.product-miniature-list .vm-badge{
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: .4rem;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13.5px);
  color: #fff !important;
  user-select: none;
  width: auto;
  max-width: max-content;
}

/* Posicionamiento: solo cuando el badge está sobre la imagen (stub correcto) */
.product-miniature.product-miniature-list .cont-img-wuala .vm-badge{
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Colores del semáforo */
.product-miniature.product-miniature-list .vm-badge--ok  { background: #22c55e; }
.product-miniature.product-miniature-list .vm-badge--low { background: #f59e0b; }
.product-miniature.product-miniature-list .vm-badge--out { background: #ef4444; }

/* Semaforo de stock en ficha de producto =================================== */
.vm-product-stock-row{
  display: block;
  margin: .2rem 0 .55rem;
  line-height: 1;
}
.vm-product-stock-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}
.vm-product-stock-inline .vm-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.vm-product-stock-inline .vm-dot.vm-dot--ok{ background: #22c55e; }
.vm-product-stock-inline .vm-dot.vm-dot--low{ background: #f59e0b; }
.vm-product-stock-inline .vm-dot.vm-dot--out{ background: #ef4444; }
.vm-product-stock-inline .vm-stock-label{ font-weight: 500; }
.vm-product-stock-inline .vm-stock-label--ok{ color: #059669; }
.vm-product-stock-inline .vm-stock-label--low{ color: #d97706; }
.vm-product-stock-inline .vm-stock-label--out{ color: #dc2626; }
.vm-product-qty-locked{
  opacity: .55;
  cursor: not-allowed;
}
.vm-product-qty-locked button,
.vm-product-qty-locked .bootstrap-touchspin-up,
.vm-product-qty-locked .bootstrap-touchspin-down,
.vm-product-qty-locked .js-touchspin{
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 6. Precio, total, acciones ================================================ */
.form-mayorista .mto-contador{
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.mto-contador-precio{
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  white-space: nowrap;
}
.mto-contador-precio.vm-has-discount{
  font-weight: 700; color: #111827;
}
.mto-contador-precio::after{
  content: " ×"; opacity: .45; margin-left: .15rem;
}
.vm-price-regular{
  display: block; font-size: 11px; color: #9ca3af;
  text-decoration: line-through; white-space: nowrap;
  font-weight: 400; line-height: 1.3; margin-bottom: 2px;
}
.vm-unit-from-margin{
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
}
.vm-unit-from-margin::after{
  content: " ×"; opacity: .45; margin-left: .15rem;
}

.product-miniature.product-miniature-list .mto-precio-base{ display: none !important; }

.vm-price-with-vat{
  display: block; color: #6b7280; font-size: 12px; margin-top: 2px;
}
.vm-price-with-vat small{ color: #9ca3af; font-weight: 400; }

.mto-contenedor-resultados{
  margin-left: .6rem;
  padding-left: .6rem;
  border-left: 1px solid rgba(15,23,42,.12);
  min-width: 0; /* v1.5.5: permite que el contenedor se achique si es necesario */
}
.mto-contenedor-resultados .mto-contador-resultado.final{
  font-weight: 700;
  width: auto;
  /* v1.5.5: sin min-width fijo; usar clamp para que el total baje de tamaño
     en pantallas chicas con cifras grandes (ej: $ 1.012.000,00) y no rompa layout */
  font-size: clamp(14px, 2.2vw, 17px);
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.mto-contenedor-resultados .mto-contador-resultado.final span:not(.vm-old-total){
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: .375rem;
  background: rgba(15,23,42,.05);
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.mto-contenedor-resultados .mto-contador-resultado.final span.is-changing{
  transform: scale(1.05);
  opacity: .9;
  background: rgba(15,23,42,.08);
}
.vm-old-total{
  display: block;
  font-size: 11px;
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.mto-contador-container,
.mto-contenedor-resultados{ white-space: nowrap; }

/* v1.5.5: que el stepper NO se achique si el total crece (cifras grandes). */
.product-miniature.product-miniature-list .vm-stepper{
  flex-shrink: 0;
}

/* 7. Botones y feedback AJAX ================================================ */
.product-miniature.product-miniature-list .vm-actions{
  display: inline-flex; align-items: center; gap: .5rem;
}
.product-miniature.product-miniature-list .vm-btn-add{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 .9rem; font-weight: 600;
  position: relative;
}
.product-miniature.product-miniature-list .vm-btn-add .vm-btn-spinner{
  display: none;
  width: 14px; height: 14px; margin-left: .5rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vm-spin .7s linear infinite;
}
.product-miniature.product-miniature-list .vm-btn-add.is-loading{
  opacity: .9; pointer-events: none;
}
.product-miniature.product-miniature-list .vm-btn-add.is-loading .vm-btn-spinner{
  display: inline-block;
}
.product-miniature.product-miniature-list .vm-btn-add.is-success{
  background: #16a34a !important; border-color: #16a34a !important;
}
@keyframes vm-spin { to { transform: rotate(360deg); } }


.product-miniature.product-miniature-list .vm-error-msg{
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: .4rem .6rem;
  border-radius: .375rem;
  font-size: .85rem;
  margin-top: .5rem;
  grid-column: 1 / -1;
}

/* 8. Responsive ============================================================= */

/* Mobile (<= 576px) — layout prototipo: imagen grande + info, luego stepper + botón */
@media (max-width: 576px){
  .product-miniature-list-row{
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
  }

  .product-miniature.product-miniature-list .cont-img-wuala{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .product-miniature.product-miniature-list .cont-img-wuala img{
    max-width: 110px; width: 100%;
  }

  .product-miniature.product-miniature-list .col-description{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    padding: 0;
  }

  .product-miniature.product-miniature-list .vm-stock-badge-row{
    margin-bottom: .3rem;
  }
  .product-miniature.product-miniature-list .vm-stock-badge-row .vm-badge{
    padding: .15rem .35rem;
    font-size: 10px;
  }

  .product-miniature.product-miniature-list .product-title a{
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 1.18;
  }
  .product-miniature.product-miniature-list .product-reference,
  .product-miniature.product-miniature-list .product-brand{
    font-size: .8rem;
  }
  .product-miniature.product-miniature-list .vm-stock-inline{
    font-size: .8rem;
  }

  /* Bloque inferior: precio × stepper = total + botón */
  .product-miniature.product-miniature-list .col-buy{
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    margin-top: 6px;
  }

  .product-miniature.product-miniature-list .form-mayorista{
    width: 100%;
  }
  /* Botón en fila propia desde 576px: precio × qty = total arriba, Añadir abajo full-width */
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "precio qty total"
      "btn    btn  btn";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
  }
  .product-miniature.product-miniature-list .mto-contador-container{
    grid-area: precio;
    text-align: left;
  }
  .product-miniature.product-miniature-list .mto-contador-precio{
    font-size: 13px;
  }

  /* Stepper en mobile */
  .product-miniature.product-miniature-list .vm-stepper{
    grid-area: qty;
  }

  /* Total: anular white-space:nowrap global para que 1fr funcione con precios largos */
  .product-miniature.product-miniature-list .mto-contenedor-resultados{
    grid-area: total;
    margin: 0; padding: 0; border: 0;
    text-align: right;
    white-space: normal;
    min-width: 0;
    overflow: hidden;
  }
  .product-miniature.product-miniature-list .mto-contenedor-resultados .mto-contador-resultado.final{
    min-width: auto;
    font-size: clamp(12px, 3.8vw, 14px);
    line-height: 1.18;
    white-space: normal;
  }
  /* Total viejo tachado: más compacto en mobile, con ellipsis si no cabe */
  .product-miniature.product-miniature-list .vm-old-total{
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Botón full-width en la segunda fila */
  .product-miniature.product-miniature-list .vm-actions{
    grid-area: btn;
    width: 100%;
    display: flex;
    gap: 4px;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    flex: 1 1 auto;
    width: auto;
    justify-content: center;
    padding: 0 1rem;
    min-height: 40px;
    font-size: 15px;
    font-weight: 600;
  }
}

/* ≤361px: solo diferencias respecto al ≤576px (Samsung S8+, Galaxy mini, etc.) */
@media (max-width: 361px){
  /* Gap ligeramente más compacto que en ≤576px */
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    gap: 10px 8px;
  }

  .product-miniature.product-miniature-list .product-title a{
    font-size: 13px;
    line-height: 1.15;
  }
  .product-miniature.product-miniature-list .mto-contador-precio{
    font-size: 12px;
  }

  /* Card más compacta */
  .product-miniature-list-row{
    grid-template-columns: 90px 1fr !important;
    padding: 8px;
  }
  .product-miniature.product-miniature-list .cont-img-wuala img{
    max-width: 85px;
  }
}

/* Tablet (577 - 991px) */
@media (min-width: 577px) and (max-width: 991px){
  .product-miniature-list-row{
    grid-template-columns: 80px 1fr 300px !important;
  }
  .cont-img-wuala img{ max-width: 72px; }

  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    gap: .5rem;
  }
}

/* Desktop (>= 992px) */
@media (min-width: 992px){
  .product-miniature-list-row{
    grid-template-columns: 90px 1fr 440px !important;
    align-items: center; gap: 12px;
  }
  .product-miniature.product-miniature-list .col-buy{
    display: flex; justify-content: flex-end; align-items: center;
  }
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    display: flex; flex-wrap: nowrap; gap: .5rem;
  }
  .product-miniature.product-miniature-list .mto-contador-container,
  .product-miniature.product-miniature-list .mto-contenedor-resultados{
    white-space: nowrap;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    white-space: nowrap; padding: .6rem .9rem; min-height: 40px;
  }
}

/* Wide (>= 1400px) */
@media (min-width: 1400px){
  .product-miniature-list-row{
    grid-template-columns: 96px 1fr 480px !important;
  }
}

/* Input group wrapping fix */
.input-group{ flex-wrap: nowrap !important; }
div.mto-contador-container{ text-align: end; }
div.mto-contador-container > span.product-price.price{ display: none !important; }

/* ============================================================================
   v1.6.3 — Botón "Agotado" alineado a la derecha en mobile
   ============================================================================
   Cuando el producto está sin stock y no permite OOSP, el stub no renderiza el
   form mayorista sino un <a class="btn-product-list"> ("Agotado"/"View"). En
   mobile ese link se mostraba centrado y full-width por las reglas generales
   de .col-buy, lo que quedaba estéticamente mal en la card. Estas reglas lo
   alinean a la derecha como un botón normal de tamaño auto. */

/* Desktop: no hace falta tocar nada (ya está alineado a la derecha por .col-buy
   con justify-content: flex-end). Esto es solo para mobile. */

@media (max-width: 576px){
  /* Cuando la card está agotada, el .col-buy no necesita borde superior ni padding
     extra (que se usaban para separar precio×stepper×total del botón). Se ve
     más limpio sin esa línea divisoria si no hay nada arriba. */
  .product-miniature.product-miniature-list .col-buy:has(.product-add-cart.vm-out-of-stock){
    justify-content: flex-end;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  /* El wrapper .product-add-cart no debe estirarse: dejar al botón con su ancho natural */
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock{
    width: auto;
    display: inline-flex;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* El botón "Agotado" en sí: tamaño compacto, no full-width */
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock .btn-product-list{
    width: auto;
    min-width: 110px;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Fallback para navegadores sin soporte de :has() (Chromium < 105, Firefox < 121
   muy antiguos). Aplicamos directamente al .product-add-cart.vm-out-of-stock,
   que sirve como segunda red de seguridad. */
@media (max-width: 576px){
  .product-miniature.product-miniature-list .product-add-cart.vm-out-of-stock{
    text-align: right;
  }
}

/* vm-mobile-view-switch-fix: Warehouse oculta el selector grilla/lista en mobile.
   El CSS generado del modulo se carga despues; si el admin desactiva el switch,
   vm_custom.css lo vuelve a ocultar con display:none !important. */
@media (max-width: 576px){
  .products-selection .grid-list,
  #js-product-list-top .grid-list,
  .products-selection .view-mode,
  .products-selection .view-switcher,
  .products-selection .iqit-grid-list,
  .product-list-switch,
  .product-view-switch,
  .pl-view,
  .pl_view,
  .pl-views{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  a.pl-list,
  a.pl-grid,
  [data-button-action="change-list-view"],
  [data-button-action="change-list-view"].hidden-sm-down,
  .view-switcher [data-button-action="change-list-view"],
  .view-switcher [data-button-action="change-list-view"].hidden-sm-down,
  .pl-list,
  .pl-grid{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .vm-mobile-view-switch-visible{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}