/* =============================================================================
   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; }

/* 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::after{
  content: " ×"; opacity: .45; margin-left: .15rem;
}
.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{
  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);
}
.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%;
  }
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "precio qty total btn";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
  }
  .product-miniature.product-miniature-list .mto-contador-container{
    grid-area: precio;
  }
  .product-miniature.product-miniature-list .mto-contador-precio{
    font-size: 13px;
  }

  /* Stepper en mobile: grid-area qty (el tamaño compacto ya lo define la sección 4) */
  .product-miniature.product-miniature-list .vm-stepper{
    grid-area: qty;
  }

  .product-miniature.product-miniature-list .mto-contenedor-resultados{
    grid-area: total;
    margin: 0; padding: 0; border: 0;
    text-align: right;
  }
  .product-miniature.product-miniature-list .mto-contenedor-resultados .mto-contador-resultado.final{
    min-width: auto; font-size: 14px;
    line-height: 1.18;
  }

  .product-miniature.product-miniature-list .vm-actions{
    grid-area: btn;
    gap: 4px;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    padding: 0 .7rem; min-height: 34px; font-size: 14px;
  }
}

/* v1.5.6: Mobile chico (<= 361px) — Samsung S8+/S20/S21, Galaxy pequeños, iPhone mini.
   iPhone SE (375px) queda FUERA y conserva el layout normal de una fila.
   El botón "Añadir" se baja a una segunda fila full-width, así en la primera fila
   queda precio × stepper = total con aire suficiente aún con totales de 7 dígitos. */
@media (max-width: 361px){
  .product-miniature.product-miniature-list .form-mayorista .mto-contador{
    /* 2 filas: [precio qty total] arriba, [btn-añadir] abajo */
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "precio qty total"
      "btn    btn btn";
    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;
  }
  .product-miniature.product-miniature-list .mto-contenedor-resultados .mto-contador-resultado.final{
    font-size: 14px;
  }

  .product-miniature.product-miniature-list .vm-actions{
    width: 100%;
    display: flex;
    gap: 6px;
  }
  .product-miniature.product-miniature-list .vm-btn-add{
    flex: 1 1 auto;
    width: auto;
    justify-content: center;
    padding: 0 1rem;
    min-height: 38px;
    font-size: 14px;
    font-weight: 600;
  }

  /* La card en general un poco 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; }