/* =========================================================
   MiMoto — Diagrama + Lista (CSS corregido)
   - Hotspots centrados (translate siempre presente)
   - Estilos unificados y sin duplicados
   ========================================================= */

/* ===== Paleta / variables ===== */
:root{
  --mm-primary: #d90429;     /* rojo CTAs */
  --mm-dark:    #1f2937;     /* botón oscuro */
  --mm-dark-2:  #0f172a;
  --mm-green:   #1e7e34;
  --mm-green-bg:#e7f8ee;
  --mm-red:     #9b1c2c;
  --mm-red-bg:  #fff1f2;
  --mm-stroke:  #e5e7eb;

  /* Colores clásicos del diagrama */
  --mm-red-dot: #cf0011;
  --mm-blue:    #242a38;
  --mm-gray:    #d9dfeb;
}

/* ===== Contenedor general ===== */
.mimoto-wrap{
  color: var(--mm-blue);
}

/* ===== Título ===== */
.mimoto-title{ margin: 8px 0 12px; font-weight: 700; }

/* ===== Frame del diagrama ===== */
.mimoto-diagrama-frame,
.mimoto-stage{                    /* soporta ambos (frame|stage) */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #0000000f;
  line-height: 0;                 /* sin gaps */
}

.mimoto-diagrama-img,
.mimoto-diagrama-frame > img,
.mimoto-stage > img{
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* ===== Hotspots =====
   IMPORTANTE: mantener translate(-50%,-50%) SIEMPRE,
   también cuando el punto esté activo/hover con scale()   */
.mimoto-hotspot{
  position: absolute;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--mm-red-dot);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transform: translate(-50%, -50%);    /* centra EXACTO en (left%, top%) */
  will-change: transform, left, top;
}

.mimoto-hotspot:hover,
.mimoto-hotspot.is-active{
  background: #ff3946;
  /* NO perder el translate al hacer scale */
  transform: translate(-50%, -50%) scale(1.08);
}

/* ===== Área lista/resultados ===== */
.mimoto-lista-area{
  margin-top: 14px;
  min-height: 220px;
  position: relative;
}

.mimoto-wrap.is-loading .mimoto-lista::before{
  content: 'Cargando…';
  position: absolute; top: 8px; left: 8px; opacity:.7;
}

/* ===== Buscador ===== */
.mimoto-buscador{
  display: flex; gap: 8px; margin-bottom: 8px;
}
#mimoto-q{
  flex: 1; padding: 8px 10px;
  border: 1px solid var(--mm-gray);
  border-radius: 8px;
}
.mimoto-btn{
  background: var(--mm-blue); color: #fff;
  border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}

/* ===== Lista de productos ===== */
.mimoto-lista{ list-style: none; margin: 0; padding: 0; }

.mimoto-item{
  position: relative;
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  border: 1px solid var(--mm-stroke);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
  margin-bottom: 8px;
}
.mimoto-item:hover{
  box-shadow: 0 8px 28px rgba(15,23,42,.06);
  border-color: #dfe3e8;
}
.mimoto-item img{
  width: 64px; height: 64px; object-fit: contain;
}
.mimoto-item .mm-info{ flex: 1 1 auto; min-width: 0; }
.mimoto-item .mm-title{ font-weight: 800; font-size: 1.05rem; color: #0f172a; }
.mimoto-item .mm-num{ color: #64748b; font-weight: 900; }
.mimoto-item .mm-price{ margin-top: .15rem; font-weight: 700; }
.mimoto-item .mm-sku{ margin-top: .15rem; font-size: .86rem; color:#475569; }

/* Estado foco (cuando se sincroniza con hotspot) */
.mimoto-item.is-focus{
  outline: 2px solid #cf0011; box-shadow: 0 0 0 4px rgba(207,0,17,.15);
}

/* Estado AGOTADO muy visible */
.mimoto-item.is-out{
  background: var(--mm-red-bg);
  border-color: #f3c2c9;
}
.mimoto-item.is-out::after{
  content: "AGOTADO";
  position: absolute; top: -8px; left: -8px;
  background: var(--mm-primary); color: #fff;
  font-weight: 900; font-size: .72rem;
  padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(217,4,41,.2);
  transform: rotate(-2deg);
}

/* ===== Badges de stock ===== */
.mm-badge{
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; border:1px solid transparent;
  letter-spacing: .2px;
}
.mm-badge.is-stock{
  background: var(--mm-green-bg); border-color: #bde1c7; color: var(--mm-green);
}
.mm-badge.is-stock::before{ content: "✓ "; font-weight: 900; }
.mm-badge.is-out{
  background:#ffe2e6; border-color:#f0b7c0; color:var(--mm-red);
}
.mm-badge.is-out::before{ content: "✕ "; font-weight: 900; }

/* ===== Controles (qty + CTA) ===== */
.mimoto-cta{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mm-select-wrap{ color:#475569; font-weight: 600; }

.mm-qtywrap{ display: flex; gap: 10px; align-items: center; }
.mm-qty{
  width: 90px; height: 42px;
  border:2px solid var(--mm-stroke); border-radius: 12px;
  padding: 0 12px; font-weight: 700; color:#0f172a;
}

/* Botón oscuro: Agregar al carrito */
.mm-add{
  background: var(--mm-dark); color:#fff; border:0;
  border-radius: 12px; padding: 10px 14px;
  font-weight: 800; line-height: 1; transform: translateZ(0);
}
.mm-add.is-loading{ opacity: .6; cursor: wait; }
.mm-add:hover{ background: var(--mm-dark-2); }

/* Botón rojo: Comprar ahora */
.mm-buy{
  background: var(--mm-primary); color:#fff;
  border-radius: 12px; padding: 10px 14px; font-weight: 900;
}
.mm-buy:hover{ filter: brightness(.95); }

/* Botón fantasma: Ver producto */
.mm-ghost{
  border:2px solid var(--mm-stroke); color:#0f172a;
  border-radius: 12px; padding: 10px 14px; font-weight: 800;
}
.mm-ghost:hover{ background:#f8fafc; }

/* Enlace "Ver carrito" */
.mm-view-cart{
  border:2px dashed var(--mm-primary); color: var(--mm-primary);
  border-radius: 12px; padding: 8px 12px; font-weight: 900; text-decoration: none;
}
.mm-view-cart:hover{ background: rgba(217,4,41,.07); }

/* Deshabilitados */
.is-disabled, .is-disabled:hover{
  opacity:.55; cursor:not-allowed; filter: grayscale(.35);
}

/* ===== Barra final (acciones masivas) ===== */
.mimoto-bulkbar{
  margin-top: 12px; padding: 12px 14px;
  border:1px dashed var(--mm-stroke); border-radius: 12px;
  background:#fafafa;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.mimoto-bulkbar .mm-bulk-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mm-bulk-add, .mm-bulk-buy{
  padding:.6rem 1rem; border:none; border-radius:.7rem; color:#fff; cursor:pointer
}
.mm-bulk-add{ background:#242a38; }
.mm-bulk-buy{ background:#cf0011; }
.mm-back-sections{
  padding:.5rem .8rem; border:1px solid #d9dfeb; border-radius:.6rem; text-decoration:none
}

/* ===== Responsivo ===== */
@media (max-width: 780px){
  .mimoto-cta{ justify-content: flex-start; }
  .mimoto-bulkbar{ flex-direction: column; align-items: flex-start; }
}