/* Encaje perfecto en modal */
.ytk-piezas-wrap { max-width: 1200px; margin: 0 auto; }
.ytk-piezas-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; }
.ytk-piezas-hint { color: rgba(0,0,0,.6); font-size: 12px; }

.ytk-piezas-stage { position: relative; max-width: 1200px; margin: 0 auto; }
.ytk-piezas-img { width: 100%; height: auto; display:block; border-radius: 10px; }

/* Por defecto: se ve SOLO la normal */
.ytk-piezas-img--base { opacity: 1; transition: opacity .22s ease, transform .22s ease; }
.ytk-piezas-img--explode { display:none; }

/* Estado explode: ocultar normal, mostrar explode */
.ytk-piezas-stage.is-explode .ytk-piezas-img--base { opacity:0; pointer-events:none; }
.ytk-piezas-stage.is-explode .ytk-piezas-img--explode {
  display:block;
  position:absolute;
  left:0; top:0;
  opacity:1;
  transform: scale(1);
  pointer-events:auto;
}

/* Overlay SVG siempre encima de la explode cuando está activo */
.ytk-piezas-overlay {
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  opacity:0;
  pointer-events:none;
}
.ytk-piezas-overlay.is-active { opacity:1; pointer-events:auto; }

/* Tooltip sutil */
.ytk-piezas-tooltip{
  position: absolute;      /* <-- antes estaba fixed */
  z-index: 50;             /* suficiente dentro del stage */
  background: rgba(11,15,20,.92);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  max-width: 280px;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  display: none;
  backdrop-filter: blur(6px);
  pointer-events: auto;    /* importante para poder click */
}
.ytk-piezas-tooltip .button { margin-top: 8px; }

/* Acciones (Pedir pieza + WhatsApp) */
.ytk-piezas-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ytk-piezas-actions .button{
  margin-top: 0;
}

.ytk-piezas-wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 9px;
  white-space: nowrap;
}

.ytk-piezas-wa .ytk-wa-ico{
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* En estado normal, el overlay NO debe existir visualmente */
.ytk-piezas-overlay { display: none; }
.ytk-piezas-overlay.is-active { display: block; }

/* Blindaje: aunque el tema intente pintar polygons, aquí se fuerzan invisibles */
#yetka-piezas-modal .ytk-piezas-overlay polygon{
  fill: transparent !important;
  stroke: transparent !important;
}